一次一个单词淡入文本的Javascript可以使用一个div，但不能使用多个div？

我试图一次淡入一个div中的一个单词。下面的代码适用于一个div，但当我有多个div时，它不会按顺序进行

这是小提琴：

有人能看到明显的问题吗？如有任何建议，请逐行打印，不胜感激。（因此，第二部分中的文本将在第一部分完成后打印。）

这些单词应该一个接一个地消失。
不可能，有些单词应该一个接一个地消失。

JavaScript

var$el=$（'.example'）.map（函数（）{
归还这个；
}).get（）；
$el.forEach（功能（eachdiv）{
var text=$（eachdiv）.text（），
单词=文本。拆分（“”）；
var html=“”；
for（var i=0；i

您应该一次选择div，然后在第一个完成后继续下一个。现在，将延迟和淡入同时附加到每个div中的每个单词。在完成第一个div或类似操作时，通过触发器启动第二个div的动画？

Jquerys动画函数在参数列表中具有回调。此回调将在动画完成后执行。或者可能是

i

是通过引用传递的。

这个怎么样

我假设你不需要动画中的延迟，而是需要它们一个接一个地出现

var words, $el;
var arrEl = [];

// loop through each div and populate the array with the container (div) element and its text content split
$('.example').each(function(){
    var $this = $(this);
    arrEl.push({el:$this,words : $.trim($this.text()).split(" ")});
    $this.empty();
});

//This will the startup function  
function fadeIn(){
    var len = arrEl.length,  obj = arrEl.shift() || {}; //get the top item from array and remove it from the array using array.shift
    $el = obj.el; //get the container from the item
    words = obj.words; //get the array of words
    //if there are any items in the array start the animation process for this item.
    if(len)  window.setTimeout(transitionElement, 0); 
}

function transitionElement(){

    var wlen = words.length,
    span = $('<span/>', {'class':'hide'}).append(" " + words.shift()); //remove and get the top text string from the word array wrap it in span with a class "hide" which will hide it by default

    window.setTimeout(function(){
        if(wlen)  //if words are available anymore then call show word
           showWord(span);
        else //else call fadeIn to process the next container in the arrEl array of items
            fadeIn();
    },0);
}

function showWord(span){
     span.appendTo($el).fadeIn(500, transitionElement); // append the span to the container with an animation duration of 500ms and in the complete callback of this invoke transitionElement to process the next word or next item. Here there is no delay required since this will invoked only when the transition of first word is completed
}
//Start animation process
fadeIn();

var单词，$el；
var arrEl=[]；
//循环遍历每个div，并使用container（div）元素及其文本内容拆分填充数组
$（'.example'）。每个（函数（）{
var$this=$（this）；
arrEl.push（{el:$this，words:$.trim（$this.text（））.split（“”}）；
$this.empty（）；
});
//这将关闭启动功能
函数fadeIn（）{
var len=arrEl.length，obj=arrEl.shift（）| |{}；//从数组中获取顶部项，并使用array.shift将其从数组中删除
$el=obj.el；//从项目中获取容器
words=obj.words；//获取单词数组
//如果阵列中有任何项目，请启动该项目的动画过程。
if（len）window.setTimeout（transitionElement，0）；
}
函数传递元素（）{
var wlen=单词长度，
span=$（“”，{'class'：'hide'}）.append（“+words.shift（））；//从单词数组中删除并获取顶部的文本字符串，使用默认情况下将其隐藏的类“hide”将其包装在span中
setTimeout（函数（）{
if（wlen）//如果单词不再可用，则调用show word
showWord（span）；
else//else调用fadeIn以处理项目arrEl数组中的下一个容器
fadeIn（）；
},0);
}
函数showWord（span）{
span.appendTo（$el）.fadeIn（500，transitionElement）；//将span附加到动画持续时间为500ms的容器中，并在此调用transitionElement的完整回调中处理下一个单词或下一项。此处不需要延迟，因为只有在完成第一个单词的转换时才会调用此函数
}
//启动动画过程
fadeIn（）；

---

你在用

做什么？要么是

，

要么是

。对不起，我弄错了！抱歉，谢谢你指出：）谢谢你的快速回复。我以为.map会把每个div放到一个数组元素中，然后我会通过foreach循环传递一个div？很抱歉，我的javascript知识不是很好。我认为这种情况会发生，但动画是“附加”的，然后继续。它不会等待动画完成。你可以用一个回调函数来捕捉它。因此，由于这种情况发生得如此之快，动画几乎同时附加到两个div（嗯，它们的单词）上，这就是为什么要将动画放在一起的原因。此外，您不需要“返回”$（this）。delay（i*500）。fadeIn（700）；。你可以打一个电话，然后再打回来。您不必在for循环中遍历div的跨度并附加动画。这会导致你为每个div做多次。再次感谢。我试着调试它，正如你所说，在Word上的动画完成之前，第一个foreach循环一直以div形式发送，我如何才能“使其连续”，因此out foreach循环等待动画完成，我对回调的了解正在应用，就像我的拼写：）谢谢。我应该如何在这里使用它？我应该在回调中查找下一个div吗？再次感谢。请参阅关于在循环中引用值。以及有关动画链接的一些提示。谢谢！正是我想要的：）非常感谢你。这正是我想做的。你能不能给我一些评论？？我知道我现在很痛苦，但无法理解一些代码，请提前干杯。@user2599381不客气。。补充了一些解释。让我知道更多的问题…很抱歉再次打扰你，但我仍在尝试解决我的问题，以证明我在回拨方面的知识，[链接]（）这把小提琴是我最新的尝试，但淡入似乎发生在没有任何想法的情况下？谢谢你advance@user2599381这是因为只有在第一项完成时，才需要执行下一项的转换，这是使用FadeIn上的回调实现的。请参见我的答案中的showWord函数。。