0

我正在尝试创建一个循环我的单词动画的回调函数。我创建了一个 jquery 函数，它以某种颜色淡入和淡出每个单词。我希望这个小动画能够正确循环。问题是，一旦我回调函数，它不会从头开始，它会再次重复最后一个代码。所以在这个例子中，你会看到关键字多用途两次。

单击此处查看我的意思的时间样本。

这是我的jQuery代码：

function wordfade(){
        $('#msg').fadeIn(2000, function() {
            $('#msg').html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function() {
                $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function(){
                    $('#msg').fadeIn(2000).html("Modern Design").css("color", "#0B8DF1").delay(800).fadeOut(2000, function(){
                        $('#msg').fadeIn(2000).html("Energy Efficient").css("color", "#AD0BF1").delay(800).fadeOut(2000, function(){
                            $('#msg').fadeIn(2000).html("Restaurant").css("color", "#F10B0B").delay(800).fadeOut(2000, function(){
                                $('#msg').fadeIn(2000).html("Retail & Pop-Up").css("color", "#C39813").delay(800).fadeOut(2000, function(){
                                    $('#msg').fadeIn(2000).html("Event Space").css("color", "#4FB186").delay(800).fadeOut(2000, function(){
                                        $('#msg').fadeIn(2000).html("Bar & Lounge").css("color", "#F10BA3").delay(800).fadeOut(2000, function(){
                                            $('#msg').fadeIn(2000).html("Residential").css("color", "#C7C7C7").delay(800).fadeOut(2000, function(){
                                                $('#msg').fadeIn(2000).html("Hotel & Lodging").css("color", "#565457").delay(800).fadeOut(2000, function(){
                                                    $('#msg').fadeIn(2000).html("Multi-Purpose").css("color", "#F1880B").delay(800).fadeOut(2000, wordfade);
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
    }
    wordfade();
4

4 回答 4

6

函数的第一行执行 a.fadeIn()并等待完成，然后再设置.html()下一行。所以第二次它淡入淡出，而 html 内容仍然是最终决定。只需将前两行组合起来，使其看起来更像其他行，它就会起作用：

function wordfade() {
    $('#msg').fadeIn(2000).html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function () {
        $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function () {
         // etc.

演示：http: //jsfiddle.net/PNDg4/

然后考虑重写整个事情以避免如此多的嵌套回调：

var words = [
    { word : "Sustainable", color : "#3AE44E" },
    { word : "Eye Catching", color : "#F18D0B" },
    { word : "Modern Design", color : "#0B8DF1" },
    { word : "Energy Efficient", color : "#AD0BF1" },
    /* etc */],
    current = -1;

function wordfade() {
    current = (current + 1) % words.length;
    $("#msg").html(words[current].word)
             .css("color", words[current].color)
             .fadeIn(2000)
             .delay(800)
             .fadeOut(2000, wordfade);
}
wordfade();

演示：http: //jsfiddle.net/PNDg4/1/

于 2013-10-03T12:48:29.027 回答
3

我感觉很慷慨...

var index = 0;
var words = [
    { text: "Sustainable", color: "#3AE44E" },
    { text: "Eye Catching", color: "#F18D0B" },
    { text: "Modern Design", color: "#0B8DF1" },
    { text: "Energy Efficient", color: "#AD0BF1" },
    { text: "Restaurant", color:  "#F10B0B" },
    { text: "Retail & Pop-Up", color:  "#C39813" },
    { text: "Event Space", color:  "#4FB186" },
    { text: "Bar & Lounge", color:  "#F10BA3" },
    { text: "Residential", color:  "#C7C7C7" },
    { text: "Hotel & Lodging", color:  "#565457" },
    { text: "Multi-Purpose", color:  "#F1880B" }];

function wordfade() {
    $("#msg")
        .html(words[index].text)
        .css("color", words[index].color)
        .fadeIn(2000).delay(800).fadeOut(2000, function() {
            index = ++index % words.length;
            wordfade();
        });
}

wordfade();

工作的jsFiddle ...

于 2013-10-03T12:59:19.827 回答
1

这是因为它以 $('#msg').fadeIn(2000, function() 开头，所以它会淡入最后一个内容。你应该将 $('#msg').fadeIn(2000, function() 与第二个结合起来行（没有测试过）

于 2013-10-03T12:42:31.237 回答
1

问题在于您的函数开始在#msg 的内容中消失

该函数的最后一个动作是将#msg 设置为“Multi-Purpose”，函数的开始是淡入内容。只需将函数的开头设置为#msg，然后淡入即可。

于 2013-10-03T12:44:28.463 回答