Соответствует ли селектор jQuery ": animated" элементам, использующим fadeIn () и fadeOut ()? - PullRequest
Новая
       17

Соответствует ли селектор jQuery ": animated" элементам, использующим fadeIn () и fadeOut ()?

0 голосов
/ 29 ноября 2009

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

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 () для достижения этих эффектов. Моя последняя проверка была как первоначально отправлено: 

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

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

Ответы [ 3 ]

2 голосов
/ 29 ноября 2009

Да, :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
}
2 голосов
/ 29 ноября 2009

: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 );
    };
});
0 голосов
/ 27 сентября 2010

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

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

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

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

...