为每个文本行设置动画

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 中的链接应该会显示动画。每一行都应该一个接一个地淡入。

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

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

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


});

Answer 2

您必须停止项目上的动画队列，例如

<a class="content-toggle" href="#">CLICK HERE</a>

<div class="content">
    <div>TEXT 1</div>
    <div>TEXT 2</div>
    <div>TEXT 3</div>
</div>

$('.content-toggle').on('click', function(e) {
    e.preventDefault();

    var content = $('.content');

    // Stop any ongoing animations and hide children.
    content.finish().children().finish().hide();

    content.fadeToggle(400, 'swing', function() {
        animateChildrenIn(content);
    });
});

function animateChildrenIn(parent) {
    parent.children().each(function(i) {
        $(this).delay((i + 1) * 200).fadeIn(800); 
    });
}

小提琴：http://jsfiddle.net/4RW5d/