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

您应该在处理程序的开头取消绑定元素。当动画准备就绪时再次绑定处理程序。

$(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')  
       }
  })
});

只有在想要在动画后再次为元素设置动画时才需要完整的回调。

Answer 2

确保在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。

清除jQuery点击队列

2 个答案: