Как в jquery дождаться анимации события, прежде чем начнет отрабатываться новое по другому событию?

Question

[EVOSandru6]

Добрый день,

Есть 2 div внутри обертки:

<div class="main-menu">
    <div>
        <span class="badge">Шоу-Рум</span>
    </div>
    <div>
        <span class="badge">Дизайн Студия</span>
    </div>
</div>

Css:

.main-menu
{
    overflow:hidden;
}
.main-menu > div
{
    outline:1px solid #000;
    float:left;
    width:45%;
}

.main-menu >  div:first-child
{
    background: lightpink;
}

.main-menu >  div:last-child
{
    background: lightgreen;
}

.main-menu >  div.active
{
    width:75%
}

.main-menu >  div.inactive
{
    width:15%
}

По умолчнию внутренние дивы шириной по 45%
Я хочу, чтобы при наведении на любой из вложенных дивов, он расширялся до 75%, а противоположный сужался до 15%.

И если мышка уходит за область дива .main-menu, чтобы оба внутренних дива становились по 45%.

Проблема в том, что если я навожу на один Левый блок и потом сразу на правый, то firebug сходит с ума и с тормозами ширины меняются. Если баловаться и мотать мышкой влево-вправо, то в порядке очереди много раз происходит данное действо. Я же хочу, чтобы пока не завершатся анимации по наведению на один блок, то никаких очередей бы не возникало. Пока код такой:

$('body').on('mousemove', '.main-menu > div:first-child', function (e)
    {
        $(".main-menu > div:first-child").animate({
            width: "75%",
        }, 500 );
        $(".main-menu > div:last-child").animate({
            width: "15%",
        }, 500).delay();
    });

    $('body').on('mousemove', '.main-menu > div:last-child', function (e)
    {
        $(".main-menu > div:first-child").animate({
            width: "15%",
        }, 500 );
        $(".main-menu > div:last-child").animate({
            width: "75%",
        }, 500).delay();
    });
    $('body').on('mouseleave', '.main-menu', function (e)
    {
        $('.main-menu > div').animate({
            width: "45%",
        }, 500).delay();
    });

Delay не спас, помогите пожалуйста.

Comments

[Сергей Сергей]

в delay нужно число вставить.
mouseenter лучше mousemove для данного случая.
есть готовые скрипты, аккордеон называются.

[EVOSandru6]

Благодарю. А можно вместо прописывания ширины в скриптах, внедрить в анимацию мои классы - active и inactive?

Answer 1

[heartdevil]

Попробуйте использовать этот метод.

Алгоритм примерно такой. 1) Стоп любой соответствующей анимации. 2) Запуск анимации.

stop method

Comments

[EVOSandru6]

А можно вместо прописывания ширины в скриптах, внедрить в анимацию мои классы - active и inactive?

[heartdevil]

EVOSandru6: Не пробовал, но попробуйте это api.jqueryui.com/switchclass

Answer 2

[Stalker_RED]

При mouseover на див - увеличиваем его и уменьшаем соседей.
При mouseleave меню - все дивы по 45%.
Демо: jsfiddle.net/mcq3xnpx
Да, главное стопы забыл jsfiddle.net/mcq3xnpx/1

Answer 3

[Дмитрий Кравченко]

Выставь стопы

$('selector').stop().animate({/*your properties*/});

Comments

[EVOSandru6]

А можно вместо прописывания ширины в скриптах, внедрить в анимацию мои классы - active и inactive?

[Дмитрий Кравченко]

mouseenter -> $(this).addClass('active').removeClass('inactive')
mouseleave -> $(this).removeClass('active').addClass('inactive')

[Дмитрий Кравченко]

в анимации тогда работать будет css, и это правильно