Question

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

这是小提琴：http://jsfiddle.net/zlud/6czap/110/

任何人都可以看到一个obivius问题吗？任何建议一个接一个地打印一行将不胜感激。（所以第二个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);``
        });        
    }
});

Answer 1

这个怎么样？

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

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

Answer 2

Jquerys动画函数在参数列表中有回调。动画完成后将执行此回调。或者也许是i通过引用传递。

Answer 3

你应该一次选择div来继续工作，并继续下一个第一个完成。现在，您可以同时将延迟和淡入添加到每个div中的每个单词。在完成第一个div时，通过触发器启动第二个div的动画或类似的东西？

Javascript淡入文本，一次一个字，可以使用一个div，但不是多个div？

3 个答案: