jQuery动画更改文本无限循环答案

【问题标题】：jQuery animate changing text infinite loopjQuery动画更改文本无限循环
【发布时间】：2016-03-30 17:06:18
【问题描述】：

我正在尝试创建一个基于淡出 - 更改文本 - 淡入概念的文本更改动画，它将作为无限循环运行，循环 3 个不同的文本，中间有 2 秒的停顿。

我的 Javascript 文件中有这个 jQuery 代码：

$(document).ready(function changeText(){
    $(this).find("#changeText").delay(2000).animate({opacity:0},function(){
        $(this).text("foo").animate({opacity:1},function(){
            $(this).delay(2000).animate({opacity:0},function(){
                $(this).text("bar").animate({opacity:1}, function(){

                });
            });
        });
    });
});

它做了它应该做的事情，但是，当然，只有一次。无论我做什么，我似乎都无法让它作为一个循环工作。我浏览了很多类似的 Stack Overflow 问题，但似乎都没有解决我的问题。

我尝试了 setInterval、window.function、for 循环和其他一些解决方案，但它们要么抛出关于递归过多的错误，要么让我的浏览器崩溃，或者根本不工作。要么它甚至不应该那样工作，要么我做的不对。

这是我要更改的 HTML：

<div class="container"><span id="changeText">blah</span></div>

【问题讨论】：

您也可以发布 html 吗？只是一个脚本代码会使事情变得更难理解。
我忘记添加了，谢谢@DinoMyte。现在已编辑。

标签： jquery jquery-animate infinite-loop document-ready

【解决方案1】：

您在代码开头使用了“this”引用，但它缺少指向它所指向元素的上下文。此外，由于您拥有 id 为“changeText”的元素，因此您可以直接在选择器中定位它。

  $(document).ready(function(){
    $("#changeText").delay(2000).animate(
    {opacity:0 },function(){
       $(this).text("foo").animate({opacity:1},function(){
        $(this).delay(2000).animate({opacity:0},function(){
            $(this).text("bar").animate({opacity:1}, function(){
            });
        });
    });
  });
});

工作示例：https://jsfiddle.net/q1o2f5jx/

编辑：

要改进代码，请在数组中添加文本并在 setInterval 上增加索引。

var textArray = ["foo","bar","blah1","blah2"];
var index = 0;
setInterval(function(){        
$("#changeText").animate({
opacity:0
},function()
{
   if(textArray.length > index) {
   $(this).text(textArray[index]).animate({opacity:1})
   index++; 
   }
   else
   index = 0;
});
},2000);

工作示例：https://jsfiddle.net/q1o2f5jx/2/

【讨论】：

现在我发现我在“this”引用上犯了一个错误。出于某种原因，它也适用于它，但你的回答并没有真正帮助我解决我试图重复的问题......
没有意识到您要求改进。按照编辑部分。
嗯，不完全是。我只是想一遍又一遍地重复动画。与此同时，我自己也找到了解决方案。还是非常感谢！
刚刚意识到你给了我一个正确的、有效的解决方案。那天我太累了，心烦意乱，看不到它，我认为它没有按我的意愿工作。将其标记为已接受的答案，谢谢！

【解决方案2】：

我一定是愚蠢的，解决方案太简单了，我看不到。我什至尝试过，但我一定是写错了东西，导致它不起作用。一直以来，我都试图从范围外重新调用 '$(document).ready' 范围内的函数，这几乎是不可能的，但我实际上不需要这样做。

我刚刚创建了一个带有 jQuery 的普通 JavaScript 函数，它在函数外被调用一次，并且每次调用都是从最后一个 .animate() 回调中进行的。

function changeText(){
    $("#changeText").delay(2000).animate({opacity:0},function(){
        $(this).text("foo").animate({opacity:1},function(){
            $(this).delay(2000).animate({opacity:0},function(){
                $(this).text("bar").animate({opacity:1},function(){
                    $(this).delay(2000).animate({opacity:0},function(){
                        $(this).text("blah").animate({opacity:1},function(){
                            changeText();                           
                        });
                    });
                });
            });
        });
    });
};

changeText();

【讨论】：