Обратный вызов jQuery animate () работает некорректно с removeClass () - PullRequest
Новая
       35

Обратный вызов jQuery animate () работает некорректно с removeClass ()

0 голосов
/ 17 марта 2012

Привет, ребята, я работаю над фрагментом кода jQuery, который предполагает удаление класса из объекта после завершения анимации. Это то, что я до сих пор: 

$('.box').hover(function() {
        $(this).stop().addClass('active').animate({ 'margin-top': '-49px' }, 500);
    }, function() {
        $element = $(this);
        $(this).stop().animate({ 'margin-top': '0' }, 500, function() {
            $element.removeClass('active');
        });
    });

Проблема в том, что иногда, когда анимация завершается, класс не удаляется. Это происходит, когда я слишком быстро двигаюсь между дивами.

Вы можете просмотреть пример здесь . В секции слайдера есть три поля внутри слайдера, на которых написано «Город», «Дом» и «Бизнес».

Любая помощь приветствуется.

PS То же самое происходит с основной навигацией, иногда там просто висит под-навигация. Вот код для навигации: 

$('#navigation ul li').hover(function(){
        $("a:eq(0)", this).addClass("hover");
        $(this).find('ul:eq(0)').stop(true, true).slideToggle();
        }, function(){
            $("a:eq(0)", this).removeClass("hover");
            $(this).find('ul:eq(0)').stop(true, true).slideToggle();
        }
    );

Ответы [ 2 ]

3 голосов
/ 17 марта 2012

Измените $element декларацию на 

var $element = $(this);
1 голос
/ 17 марта 2012

Основная проблема, вероятно, заключается в том, что $element является неявной глобальной переменной, поэтому, когда несколько объектов .box имеют анимацию при наведении, идущую одновременно, они наступают на значение друг друга в глобальной переменной. Это должно быть var $element = $(this), чтобы правильно сделать его локальной переменной. Или необходимость в этом может быть полностью устранена, как я показал в предложенном мной коде ниже.

Кроме того, функция завершения не вызывается, когда анимация завершается с помощью .stop(), поэтому, когда вы идете очень быстро, вы, скорее всего, остановите некоторые из ваших анимаций с помощью .stop(), что приведет к тому, что функции завершения не будут вызываться. В зависимости от ситуации это может быть или не быть проблемой.

Возможно, вы также захотите посетить параметры, которые вы используете для .stop(), потому что часто вы хотите по крайней мере использовать .stop(true), чтобы не только остановить текущую анимацию, но и удалить ее из очереди, чтобы она не действовал позже.

Я бы предложил эту реализацию: 

$('.box').hover(function() {
    $(this).stop(true).addClass('active').animate({ 'margin-top': '-49px' }, 500);
}, function() {
    $(this).stop(true).animate({ 'margin-top': '0' }, 500, function() {
        $(this).removeClass('active');
    });
});
...