当用户单击多个链接时，几个动画正在以相同的速度播放，但是我只希望播放最后一个选择的动画.(初学者)

Question

我已经在线放了一个简单的示例：

http://philiphannaart.nl/helpme/

用户单击动画将启动的三个链接之一。如果用户下一次点击等待直到动画完成，则可以使用。但是，如果他在每个链接上快速点击，那么就会变得越来越大并搞砸了。有什么建议如何解决这个问题或在哪里寻找解决方案？

非常感谢！

Answer 1

只需在每个.aimimate（），.fadein（），.fadeout（）

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