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

我想通过以下方式为文字制作动画：

当您点击＆＃34;点击此处＆＃34;文本，粉色div中的链接应该是动画。每一行应该一个接一个地淡入。

但是，我认为我的代码是错误的，因为如果你点击＆＃34;点击这里＆＃34;快速连续几次文本，动画建立发生。

我该如何解决这个问题？

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/

为每个文本行设置动画

2 个答案: