3

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

这是小提琴：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);``
        });        
    }
});
4

3 回答 3

2

这个怎么样？

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

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();

小提琴

于 2013-09-11T14:43:57.863 回答
1

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

于 2013-09-11T14:07:09.810 回答
0

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

于 2013-09-11T14:04:54.070 回答