animate.css因動態內容失敗

所以我正在用jquery沿着動畫製作唱歌的過程。我設法制作了一個jQuery腳本，使字體顏色在我選擇的四種不同顏色之間交換，然後將這些新信息附加到div。animate.css因動態內容失敗

我想要做的下一件事是讓單詞/字母反彈到音樂並做到這一點我選擇animate.css，因爲它是輕量級且易於使用。我遇到的問題是，添加到我的動態創建的文本時似乎不起作用。文字顏色的作品，它似乎應用正確的類和屬性的字母/單詞，但它似乎從來沒有真正反彈。有任何想法嗎？

//fade out the sugar skull div 
$(function() { 
    $('.sugarskull').fadeIn('slow', function() { 
    $(this).delay(15000).fadeOut('slow'); 
    }); 
}); 

//js script to rotate colors on font 
$('.lyrics').each(function() { 
    var letters = $(this).text().split(''); 
    var colors = ["#e72f14", "#f59f00;", "#ea4591", "#2a94c7"]; 
    for (var i = 0; i < letters.length; i++) { 
    //animated bounce class is specific to the animate.css library and 
//should make the letters bounce but fails 
    letters[i] = "<span class = 'animated bounce' style='color:" + 
colors[(i % colors.length)] + ";'>" + letters[i] + "</span>"; 
    } 
    $(this).html(letters.join("")); 
});

來源

2017-12-03 Gracie Sullivan

你加入動畫反彈跨越。

所以跨度元素應該有下面的CSS工作動畫::

span {position: relative; display: block;}

來源

2017-12-03 07:19:21 Sonia

給那一個鏡頭，但它實際上是由每個字母塊元素這絕對不是我想要的。我想知道這是否與我動態獲取內容有關。 –

好於添加顯示：inline-block; – Sonia

嘿索尼婭，所以我和我的朋友一直在做這方面的一些測試，我們似乎已經得出結論，css庫不能在dyanimcally創建的內容上運行。我們不確定爲什麼這是我自己硬編碼。我嘗試了一個內聯塊，但它似乎沒有幫助:( –

animate.css因動態內容失敗

回答

相關問題