Остановка функции jquery от многократного действия
Вопрос
У меня есть эффект переключения затухания, но когда вы нажимаете кнопку несколько раз, он несколько раз появляется и исчезает.(Поэтому, если я щелкну идентификатор затухания 20 раз быстрее, он будет исчезать и исчезать несколько раз). Как мне остановить это и сделать так, чтобы вы могли переключать затухание только после завершения анимации?Я попытался получить текущее значение и сделать оператор if, но это не сработало :*(
Спасибо
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('.open').click(function() {
$('#fadeMe').next().fadeToggle('slow');
});
});
Решение
Вам нужно проверить, не является ли элемент :animated, если да, вызовите .animate:
<body>
<button class="open">open</button><br>
<div id="fadeMe">fade me!</div>
<style>#fadeMe {
width:20em;
height:10em;
background:black;
color:#fff;
}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('.open').click(function() {
var el = $('#fadeMe').next();
if ( !el.is(':animated') ) {
$(el).fadeToggle('slow');
}
});
});
</script>
</body>
Демо: http://jsbin.com/irare
Другие советы
Использовать .stop()
.Это останавливает всю анимацию элемента.
$('#fadeMe').next().stop().fadeToggle('slow');
Не связан с StackOverflow