Делает jQuery & # 8220;: animated & # 8221; Селектор соответствует элементам, которые используют fadeIn () и fadeOut ()?

Question

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

if(!$(this).is(:animated)) {
    // handle click code here
}

Обратите внимание на 'bang' (!) в приведенном выше утверждении if. Я не проверял, но я предполагаю, что это будет работать. В чем я не уверен, так это в том, что .is (: animated) вернет true при запуске с элементом, который анимируется с помощью fadeIn () и fadeOut (). Я знаю, что jQuery имеет функцию .animate (), и я предполагаю: animated, безусловно, работает с элементами, анимированными с помощью этой функции, но будет ли он работать с теми, которые используют fadeIn () и fadeOut ()? Спасибо.

ОБНОВЛЕНИЕ: После некоторых существенных ошибок все выглядит хорошо, и спасибо репонерам за все замечательные последующие действия и правки. В конце концов я обнаружил, что да: animated соответствует элементам, анимированным с использованием fadeIn () и fadeOut (), потому что источник jQuery использует .animate () для достижения этих эффектов. Моя последняя проверка была как первоначально отправлено:

<*>

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

Answer 1

Да, : animated вернет true для любой анимации, которую создает jQuery. Это также будет сделано для любых плагинов, которые анимируют, если они используют функцию jQuery animate .

Однако вы можете написать свой код просто по-другому, чтобы использовать jQuery:

Изменить . Функция not не является противоположностью is . Он отфильтровывает узлы, но по-прежнему возвращает объект jQuery, который оценивается как true . Чтобы использовать функцию not , как я изначально предлагал, вам нужно добавить .length в тест:

if( $(this).not(':animated').length ) {
    // Handle click code here
}

В противном случае используйте функцию в качестве первоначально опубликованного ОП:

if( !$(this).is(':animated')) {
    // Handle click code here
}

Answer 2

: animate будет соответствовать элементам, для которых был вызван fadeOut .

Если вы заглянете в исходный код jQuery, вы увидите, что fadeOut просто вызывает animate .
Это определено так:

// Generate shortcuts for custom animations
jQuery.each({
    slideDown: genFx("show", 1),
    slideUp: genFx("hide", 1),
    slideToggle: genFx("toggle", 1),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" }
}, function( name, props ){
    jQuery.fn[ name ] = function( speed, callback ){
        return this.animate( props, speed, callback );
    };
});

Answer 3

Вам вообще не нужно иметь оператор if. Вы можете поставить цепочку .not (': animated') перед вашим "кодом клика".

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

$('a#show_me').toggle(function() {
    $('div#the_money').not(':animated').fadeIn();
}, function() {
    $('div#the_money').not(':animated').fadeOut();
});

Это также будет работать для .click ().