3

div から一度に 1 つの単語をフェードインしようとしています。以下のコードは 1 つの div に対しては正常に機能しますが、複数の div がある場合、連続して実行されません。

これがフィドルです：http://jsfiddle.net/zlud/6czap/110/

誰でも明らかな問題を見ることができますか? 1行ずつ印刷するという提案は大歓迎です。(したがって、最初の div が完了した後に、2 番目の 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 に答える