jquery clickling fast

Question

我有这个功能，在ul上添加了31px到我的样式底部。 它工作正常，但如果我点击快速，它不会再添加31px，但一些奇怪的数字像17.423px。我想这是因为动画没有完成，因此通过点击快速它将31px添加到当前px数量。我的想法是，我需要插入一个stop（）。但是哪里？

$(function() { 
     $('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function() { 
      if ($("ul").css("bottom") !== '2728px') { 
       $(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({ 
        bottom: '+=31' 
       }, 200); 
      } 
     }); 
    }); 

Answer 1

的动画排队，但它可能是该值动画计算动画排队中，如您使用的是相对值，它会从它当前位置计算动画。

您已在代码中调用stop。我不知道你以后是否加了这个，否则这也可以解释价值。如果半途停止动画，则底部值自然会半途变化。

你可以保持当前目标值的变量，以便您可以指定动画的绝对值：

$(function() { 

    var current = 0; 

    $('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function() { 
     if (current < 2728) { 
     current += 31; 
     $(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({ 
      bottom: current + 'px' 
     }, 200); 
     } 
    }); 
}); 

这样你就可以保持stop调用，这样新的动画取代了以前的，而不是正在排队。

Answer 2

我可能会尝试阻止函数如果一个已经在飞行中触发。像这样的东西可能会奏效：

$(function() { 
     $('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function() { 
      if ($(this).data('in_flight') === true){ 
       return false; 
      } else { 
       if ($("ul").css("bottom") !== '2728px') { 
        $(this).data('in_flight', true); 
        $(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({ 
         bottom: '+=31' 
        }, 200); 
        $(this).data('in_flight', false); 
       } 
      } 
     }); 
    }); 

一个更复杂的方法是计算点击次数并预约（触发下一个当前正在运行的功能完成后）。你可以使用类似的代码来做到这一点。