我试图从一个 div 中一次淡入一个词。下面的代码适用于一个 div，但当我有多个 div 时，它不会按顺序执行。
这是 fiddle :http://jsfiddle.net/zlud/6czap/110/
谁能看出明显的问题？任何一行接一行打印的建议将不胜感激。 (因此第二个 div 中的文本将在第一个 div 完成后打印。)
<html>
<div class="example">These are some words that </br> should be faded in one after the other.</div>
<div class="example"> No way some words that </br> should be faded in one after the other.</div>
</html>
JavaScript
var $el = $('.example').map(function () {
return this;
}).get();
$el.forEach(function (eachdiv){
var text = $(eachdiv).text(),
words = text.split(" ");
var html = "";
for (var i = 0; i < words.length; i++) {
html += "<span>" + words[i] + " </span>";
$(eachdiv).html(html).children().hide().each(function(i){
return $(this).delay(i*500).fadeIn(700);``
});
}
});
最佳答案
这个怎么样？
我假设您不需要动画延迟，而是需要它们一个接一个地出现。
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();
关于Javascript 淡入文本，一次一个词，适用于一个 div，但不适用于多个 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18743208/