Очистить Jquery очередь нажмите

Question

У меня есть функция:

$(function(){ 
    $("#mydiv").click(function(){ 
if ($(this).hasClass('positive')) { 
    $(this).delay(400).animate({right:'-210px'},1000) 
      .addClass('negative').removeClass('positive') 
} else { 
    $(this).delay(400).animate({right:'10px'},1000) 
      .addClass('positive').removeClass('negative') 
} 
}).clearQueue() 
}); 

Но если я нажимаю на моем DIV тысячу раз, он будет выполнять анимацию в тысячу раз. Я пытался делать покупки по документации JQuery API, но ни .clearQueue() (как в функции), ни .stop(true), похоже, работает.

Answer 1

Обязательно используйте stop(true) перед вызовом delay(). Следующие должны делать то, что вы хотите:

$('#mydiv').click(function() { 
    if ($(this).hasClass('positive')) { 
     $(this) 
      .addClass('negative') 
      .removeClass('positive') 
      .stop(true) 
      .delay(400) 
      .animate({ right: '-210px' }, 1000); 
    } else { 
     $(this) 
      .addClass('positive') 
      .removeClass('negative') 
      .stop(true) 
      .delay(400) 
      .animate({ right: '10px' }, 1000); 
    } 
}); 

Пример jsFiddle.

Answer 2

Вы должны развязать свой элемент в начале вашего обработчика. И когда анимация готова, снова свяжите обработчик.

$(function(){ 
    $("#mydiv")click(function stg(e){ 
     var elem=$(e.target); 
     elem.off('click',stg); 
     if ($(this).hasClass('positive')) { 
      $(this).delay(400) 
        .animate(
        {right:'-210px' 
        ,complete:function(){elem.on('click',stg)} 
        },1000) 
        .addClass('negative').removeClass('positive') 
     } else { 
      $(this).delay(400) 
        .animate(
        {right:'10px' 
        ,complete:function(){elem.on('click',stg)} 
        },1000) 
       .addClass('positive').removeClass('negative') 
     } 
    }) 
}); 

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