Стоп () jQuery блокирует анимацию, которая еще не была поставлена ​​в очередь

Question

Как на самом деле работает stop() в jQuery?

Если вы посмотрите здесь (http://jsfiddle.net/hWTT6/),, когда вы наводите курсор на основной синий прямоугольник, он должен исчезнуть до красного, а когда вы зависаете, он должен исчезнуть. Проблема в том, что он полностью исчезнет до красного (а затем назад к синему), даже если мышь зависла до завершения первого затухания. Проблема может быть более отчетливо видна с эффектом слайда. Наведите указатель мыши на кнопку «слайд», и основной блок переместится в синий цвет, завис над ним. будет скользить назад. Но попробуйте включать и выключать и включать и выключать до завершения первой анимации. Вы увидите, что все четыре анимации выполнены. Я включил оба примера здесь, чтобы показать, что это не просто проблема с одним эффектом или что-то.

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

Что мне здесь не хватает?

Спасибо.

Answer 1

Вам не хватает, что .stop() принимает два аргумента. Обе логические, с указанием:

- clearQueue (first)
- jumpToEnd (second)

Итак, позвонив по номеру $('#foo').stop( true, true ).doSomeOtherStuff(), вы получите желаемую цель.

Ссылка: .stop()

Answer 2

Проблема в том, что CSS портится из-за остановки в произвольных точках.

fadeIn(), fadeOut(), slideUp() и slideDown() переходят из текущего состояния в новое, а затем возвращаются к нему, а не к исходному CSS.

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

Как уже говорили другие, вы можете вернуть CSS в правильное положение, гарантируя, что когда вы остановите анимацию, она перейдет к ее концу, а не оставит все в произвольном состоянии.

UPDATE:

Посмотрите на код в этом обновлении вашей демонстрации: http://jsfiddle.net/hWTT6/5/

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

$(function() {
    $('#fade')
    .mouseenter(function() {
        $('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() {
            $('#fg_fade').css('height', '100%');
        });
    })
    .mouseleave(function() {
        $('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow');
    });

    $('#slide_fire')
    .mouseenter(function() {
        $('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() {
            $('#fg_fade').css('opacity', 1);
        });
    })  
    .mouseleave(function() {
        $('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() {
            $('#fg_fade').css('opacity', 1);
        });
    });
});

Answer 3

Метод stop можно вызывать следующими способами:

.stop(true); 
//Same as:
.stop(true, false); //Empty the animation queue only


//Or
.stop(true,true); // Empties the animation queue AND jumps to the end


//Default
.stop()

//Same as

.stop(false,false);

Может быть лучше использовать вместо этого .animate: Демо здесь

$(function() {
    $('#fade')
    .mouseenter(function() {
        $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow');
    })
    .mouseleave(function() {
        $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow');
    });  


    $('#slide_fire')
    .mouseenter(function() {
        $('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');    
    })  
    .mouseleave(function() {
        $('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow');
    });

});

Таким образом, анимация останавливается, когда вы этого хотите, и по-прежнему запускает следующую анимацию.

Проблема с выполнением .stop затем slideUp/slideDown или fadeIn/fadeOut заключается в том, что анимация может преждевременно завершиться и сохранить неправильную высоту / непрозрачность.

Answer 4

Вы можете установить опции stop () на (true, true), чтобы отменить все события в cue и перейти к концу предыдущей анимации.посмотрите на скрипку: http://jsfiddle.net/hWTT6/4/

Answer 5

Проблема вызвана тем, как работают fadeIn, fadeOut и т. Д. Вы можете ожидать, что они уменьшатся между 0 и 1. Однако в действительности они уменьшаются между 0 и любой непрозрачностью «базовой линии». Вы можете увидеть это здесь:

http://jsfiddle.net/hWTT6/7/

Вы заметите, что я установил начальную непрозрачность на .5. Теперь, когда я звоню fadeIn, он не полностью исчезает до 1, он исчезает до моей базовой линии .5. Ваша проблема возникает, когда вы преждевременно останавливаете анимацию, «базовая линия» становится любой непрозрачностью во время остановки. Теперь, когда вы звоните fadeIn на mouseleave, он пытается перейти к этой новой базовой линии и находит, что он уже там. Вы можете увидеть это, зайдя сюда:

http://jsfiddle.net/hWTT6/8/ (оригинал, но с .stop)

Если навести курсор мыши на slide, а затем убрать его на полпути во время анимации, он остановится посередине. Теперь наведите курсор мыши на slide и дождитесь завершения анимации. Если вы сейчас удалите свою мышь, вы увидите, что она скользит вниз к месту, где была остановлена ​​первая анимация. Это потому, что это новая «базовая линия».

Способ решения этой проблемы - заменить fadeIn, fadeOut и т. Д. Более явной анимацией. Например, используйте fadeTo, чтобы заставить его исчезать между 0 и 1:

http://jsfiddle.net/hWTT6/6/

Обратите внимание, что, поскольку я говорю, чтобы оно постепенно уменьшалось до 0 или 1, все работает. Аналогичную вещь можно сделать, чтобы заменить slideUp и slideDown, используя animate.