jquery - 当用户点击多个链接时，几个动画同时播放，但我只想播放最后一个选择的动画。（初学者）

Question

我在网上放了一个简单的例子：

http://philiphannaart.nl/helpme/

当用户单击三个链接之一时，动画将开始。如果用户等待下一次点击直到动画完成，它就会起作用。但是，如果他在每个链接上快速单击它就会变得混乱和混乱。任何建议如何解决这个问题或在哪里寻找解决方案？

非常感激！

Answer 1

只需在每个 .animate() 、 .fadeIn() 、 .fadeOut() 之前写 .stop()

Answer 2

您没有提供用于它的代码。

但正如我假设的那样，当您单击按钮时，您必须使用.stop()在代码中播放动画。

我做了一些事情：

var anigone = function() {
    $("#oneb").stop().fadeOut(1000);
    $("#twob").stop().fadeOut(1000);
    $("#threeb").stop().fadeOut(1000);
    $("#one").stop().fadeIn(0);
    $("#two").stop().fadeIn(0);
    $("#three").stop().fadeIn(0);    
}

var red = function() {

    anigone();

    var red2 = $('#one');
    red2.stop().delay(1000).animate({
        left: 330 
    }, 1000, function() {
     red2.stop().fadeOut(1000);
     $("#oneb").stop().fadeIn(1000);
    });
    $("#two").stop().delay(1000).animate({
    left:480  }, 1000);
    $("#three").stop().delay(1000).animate({
    left:630  }, 1000); 
    $("#four").stop().delay(1000).animate({
    left:790  }, 1000);
}

var green = function() {

    anigone();

    $("#one").stop().delay(1000).animate({
    left:180 }, 1000);
    var green2 = $('#two');
    green2.stop().delay(1000).animate({
        left: 330 
    }, 1000, function() {
     green2.stop().fadeOut(1000);
     $("#twob").stop().fadeIn(1000);
    });
    $("#three").stop().delay(1000).animate({
    left:480  }, 1000); 
    $("#four").stop().delay(1000).animate({
    left:630 }, 1000);
}

var blue = function() {

    anigone();

    $("#one").stop().delay(1000).animate({
    left:30 }, 1000);
    $("#two").stop().delay(1000).animate({
    left:180 }, 1000);
    var blue2 = $('#three');
    blue2.stop().delay(1000).animate({
        left: 330 
    }, 1000, function() {
     blue2.stop().fadeOut(1000);
     $("#threeb").stop().fadeIn(1000);
    });
    $("#four").stop().delay(1000).animate({
    left:480 }, 1000);
}

$("#red").live('click', function() {
red();
});
$("#green").live('click', function() {
green();
});
$("#blue").live('click', function() {
blue();
});

​</p>