Делает jQuery & # 8220;: animated & # 8221; Селектор соответствует элементам, которые используют fadeIn () и fadeOut ()?
Вопрос
Я пытаюсь предотвратить щелчки на элементе списка во время анимации. Итак, в верхней части моего обработчика кликов я хочу сделать что-то вроде этого:
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 (), как было предложено в некоторых случаях (хотя я считаю, что они будут работать так, как в данный момент опубликовано). Еще раз спасибо.
Решение
Да, : 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
}
Другие советы
: 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 );
};
});
Вам вообще не нужно иметь оператор if. Вы можете поставить цепочку .not (': animated') перед вашим "кодом клика".
В качестве примера, эти затухания сработали бы, только если div не находился в процессе анимации, поэтому избавился от неприятной проблемы с очередью.
$('a#show_me').toggle(function() {
$('div#the_money').not(':animated').fadeIn();
}, function() {
$('div#the_money').not(':animated').fadeOut();
});
Это также будет работать для .click ().