Question

我对jQuery / Javascript中的编程有点新，并且在div标签（容器）中显示/隐藏一系列标题时出现了一些问题。尝试回调的脚本代码是：

$(document).ready(function(){
    $('<h1>Text1</h1>').hide().prependTo("#container").fadeIn(2000, function(){
        $("#container h1").fadeOut(2000, function(){
            $('<h1>Text2</h1>').hide().prependTo("#container").fadeIn(2000, function(){
                $("#container h1").fadeOut(2000, function(){
                    $('<h1>Text3</h1>').hide().prependTo("#container").fadeIn(2000, function(){
                        $("#container h1").fadeOut(2000, function(){
                            $('<h1>Text4</h1>').hide().prependTo("#container").fadeIn(2000);
                        });
                    });
                });
            });
        });
    });
});

我基本上希望它用fadein来消除Tesxt1标题，然后淡出，然后使用fadein和fadeout来显示text2。 Text4是最后一个，应该只有fadein而没有淡出。如果没有回调函数，一切都会同时执行，当它们被添加（错误地）在上面时，后面的文本会被多次添加。

非常感谢你的时间。

Answer 1

首先添加和隐藏元素，然后为它们设置动画。

jsFiddle

$(document).ready(function(){
    var text1 = $('<h1>Text1</h1>').hide().prependTo("#container");
    var text2 = $('<h1>Text2</h1>').hide().prependTo("#container");
    var text3 = $('<h1>Text3</h1>').hide().prependTo("#container");
    var text4 = $('<h1>Text4</h1>').hide().prependTo("#container");
    text1.fadeIn(2000, function(){
        text1.fadeOut(2000, function(){
            text2.fadeIn(2000, function(){
                text2.fadeOut(2000, function(){
                    text3.fadeIn(2000, function(){
                        text3.fadeOut(2000, function(){
                            text4.fadeIn(2000);
                        });
                    });
                });
            });
        });
    });
});

Answer 2

以下是我认为更清晰，更易维护，更具可扩展性的解决方案：http://jsfiddle.net/Akkuma/8GAN8/

你在第一个数组元素上开始动画，给它完成后想要完成的nextStep（通过使用Promises），然后让每个nextStep递归调用自己直到你到达最后一个“框架”动画。

jQuery回调函数问题

2 个答案: