jquery - 没有得到如何排队动画序列

Question

我正在编写一个小脚本。我差不多完成了，只需要做一些修改。在此处查看演示。我想要做的是，只有一个框应该说“你好朋友”，但如果你立即点击 2-3 个框，它会在多个框中显示“你好朋友”。

$(document).ready(function(){
$(".main").click(function(){

  if($('.active').length){
    // Slide down previous theater 
    $(this).animate({
        top: '+=0',
    }, 200, function() {
        $(".main").removeClass("active");
    });     
    $(".active").next("div").animate({
        top: '+=270',
    }, 200, function() {
    }); 
  }

    // slide up new theater
    $(this).animate({
        top: '-=0',
    }, 200, function() {
        $(this).addClass("active");
    });     
     $(this).next("div").animate({
        top: '-=270',
    }, 200, function() {
    }); 

});
});

Answer 1

如果您试图防止动画期间发生的快速点击，那么您可能需要.stop(true, true)在开始下一个动画之前停止任何现有动画。这保证了在您开始下一个动画之前它处于一致的状态。

一旦我在这里添加.stop(true, true)到您的每个动画：http: //jsfiddle.net/jfriend00/uquB3/，那么快速点击就不会再混淆它了。

---

此外，动画top: '+=0'或top: '-=0'什么都不做。你告诉 jQuery 获取 top 的当前值并添加0到它没有可见的结果。

也许您的意思是取出+=并直接使用top: 0，或者您根本不需要该动画？