@EVOSandru6

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

Добрый день,

Есть 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 не спас, помогите пожалуйста.
  • Вопрос задан
  • 278 просмотров
Решения вопроса 3
@heartdevil
плыву как воздушный шарик
Попробуйте использовать этот метод.

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

stop method
Ответ написан
Stalker_RED
@Stalker_RED
При mouseover на див - увеличиваем его и уменьшаем соседей.
При mouseleave меню - все дивы по 45%.
Демо: jsfiddle.net/mcq3xnpx
Да, главное стопы забыл jsfiddle.net/mcq3xnpx/1
Ответ написан
Комментировать
Выставь стопы
$('selector').stop().animate({/*your properties*/});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы