淡入文本的Javascript一次只能使用一个单词，但只能用于一个div，但不能用于多个div? [英] Javascript to fade text in, one word at a time, works with one div, but not multiple divs?
问题描述
我试图一次从div淡入onw单词，下面的代码对于一个div可以正常工作，但是当我有多个div时，它不会顺序执行.
I'm trying to fade in onw word at a time from a div the below code works fine for One div but when I have multiple divs, it does not do it sequentily.
这是小提琴: http://jsfiddle.net/zlud/6czap/110/
任何人都可以看到强迫症吗?任何建议在另一行之后打印一行，将不胜感激. (因此第二个div中的文本将在第一个div完成后打印出来)
can any one see a obivius problem? Any suggestions to print one line after the other would be greatly appreciated. (so the text in the second div will be printed after the first div is done )
<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);``
});
}
});
推荐答案
如何?
我假设您不需要动画延迟，而是需要它们一个接一个地出现.
I am assuming you dont need a delay in animation, instead you need them to appear one after the other.
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();
Fiddle
- fadeIn() callback syntax
- Array.shift
这篇关于淡入文本的Javascript一次只能使用一个单词，但只能用于一个div，但不能用于多个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
