哪裏的話通過一個

有人問我，如果我能想出使用jQuery在那裏我得到一個字符串，且程序會自動檢測的話，並在動畫的每個字，一個在HTML中的文字效果出現一個jQuery的文字效果時間。哪裏的話通過一個

贊。

秒到動畫顯示：「快樂」
秒進入動畫表示：「新年快樂」
秒進入動畫表示：「新年快樂」
秒進動畫節目：「新年快樂2011」

每個單詞都應該「緩慢/淡入淡出」，我認爲一個簡單的以像素爲單位的滑動窗格會令人滿意 - 但不會。逐詞地。

我可能需要關於這個的一些想法。我知道一些jQuery和很多Javascript，所以我想我需要一些關於jQuery部分的幫助。

對於單詞的列表，我只想分裂的「」（空格），並接受「。！」等等是一個詞的一部分。

但是我怎麼動畫這個「動態數組」，在jQuery的 - 有一個插件的地方還是我第一？

我在想，也許一個項目符號列表可能是伎倆，然後使其上浮水平就像一個菜單，然後加字作爲一個新的子彈，每秒一次。但我很高興看到這裏的專家提出解決方案。：O）

編輯從標記的答案，我有這樣的：

var str = $('div#greeting h1').html(); // grab text 
    $('div#welcome h1').html(""); // clear text 

    var spans = '<span>' + str.split(" ").join(' </span><span>') + '</span>'; 
    $(spans).hide().appendTo('div#greeting h1').each(function(i) 
    { 
     $(this).delay(500 * i).fadeIn(); 
    });

strong標籤的工作原理，但文字的莫名其妙部分消失在一組。

試試這個：「這裏是一個測試文本[強]我們認爲，這是更好的[/強]比以往任何時候。」並看到問題。

來源

2011-01-05 BerggreenDK

工作例如：http://jsfiddle.net/TcdQb/

var str = $('span.ticker').text(); 

var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>'; 

$(spans).hide().appendTo('body').each(function(i) { 
    $(this).delay(1000 * i).fadeIn(); 
});

這會將詞語的跨度標籤："Happy New Year 2011"
創建DOM元素：$(spans)
隱藏他們：.hide()
追加它們：.appendTo('body')
最後，對它們進行迭代使用.each()，和.delay()每一個由1000毫秒乘以迭代的當前索引的.fadeIn()。

編輯：這裏有一個更新，使用更短的延遲，以及更長的動畫的例子，所以動畫重疊一點點。

http://jsfiddle.net/TcdQb/1/

$(this).delay(400 * i).fadeIn(1000);

編輯：對付嵌套的標籤（只有一層深），你可以這樣做：

http://jsfiddle.net/WgMrz/

var h1 = $('div#greeting h1'); 

h1.hide().contents().each(function() { 
    var words; 
    if (this.nodeType === 3) { 
     words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>'; 
     $(this).replaceWith(words); 
    } else if (this.nodeType === 1) { 
     this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>'; 
    } 
}); 

    // Remove any empty spans that were added 
h1.find('span').hide().each(function() { 
    if(!$.trim(this.innerHTML)) { 
     $(this).remove(); 
    } 
}); 

h1.show().find('span').each(function(i) { 
    $(this).delay(400 * i).fadeIn(600); 
});

來源

2011-01-05 18:19:31 user113716

+1簡單 – 2011-01-05 18:24:20

非常好！現在我必須決定誰應該有「答案」..希望我可以標記多個...... – BerggreenDK 2011-01-05 21:52:49

我該如何初始化str變量，讓我們用一個名爲eg的css類來說一個span/div。「ticker」：新年快樂2011 – BerggreenDK 2011-01-05 21:56:44

你「的詞BlockFadeIn」動畫這裏想：http://dev.seankoole.com/jquery/ui-effect/text.html

剛剛發佈！

來源

2011-01-05 18:18:08

D'oh。比我的答案好得多。我使用Emacs而不是Google的錯。 – Malvolio 2011-01-05 18:45:00

我剛好碰巧在前些日子讀到了這個消息。 – 2011-01-05 18:49:49

這是一個很棒的頁面，也有很多有趣的樣本。但我認爲正確的答案應該是這次最精確的答案。感謝您的鏈接。很酷的東西！ – BerggreenDK 2011-01-05 21:54:47

我不是專家，但也許你正在超越這個。如何：

var fadeWordsIn = function(elem$) { 
     var txt = elem$.text().split(' '); 
     elem$.empty(); 
     var pushIt = function() { 
      if (txt.length) { 
       var word = txt.shift(); 
       var span$ = $("<span>" + word + " </span>"); 
       elem$.append(span$); 
       span$.hide().fadeIn(1000, pushIt); 
      } 
     }; 
     pushIt(); 
    };

來源

2011-01-05 18:43:58 Malvolio

非常好，很容易閱讀和理解。 – BerggreenDK 2011-01-05 21:52:03

謝謝，這就是我的目標。 – Malvolio 2011-01-05 23:33:00

哪裏的話通過一個

回答

相關問題