javascript - 动画每个文本行

Question

$("span").click(function(){
$("div").fadeToggle();
});

$("span").click( function(){
    $("a").css({ opacity: '0' });
    $(".text1").delay(200).animate({ opacity: '1' });
    $(".text2").delay(400).animate({ opacity: '1' });
    $(".text3").delay(600).animate({ opacity: '1' });
});

我想用以下方式为我的文字制作动画:

当您单击“单击此处”文本时，粉红色 div 中的链接应该具有动画效果。每行应该淡入淡出，一条接一条。

但是，我认为我的代码是错误的，因为如果您快速连续多次单击“单击此处”文本，就会出现动画。

我应该如何解决这个问题？

http://jsfiddle.net/XdLzp/

Answer 1

你试过这样的事情吗

$("span").click(function(){
$("div").fadeToggle();
});

$("span").click( function(){
    $("a").css({ opacity: '0' });
    $(".text1").animate({ opacity: '1' },function(){
        $(".text2").animate({ opacity: '1' },function(){
            $(".text3").animate({ opacity: '1' });
        });
    });


});