animate.cssが動的コンテンツに失敗しています

Question

jqueryでアニメーションに沿って歌を作っています。私はjqueryスクリプトを作成して、選択した4つの異なる色の間でフォントの色を入れ替え、その新しい情報をdivに追加します。

私がやりたいことは、単語/文字を音楽に跳ね返させることです。軽くて使いやすいので、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("")); 
}); 

Answer 1

あなたはまたがるアニメーションバウンスを追加しています。

ので、span要素は、アニメーションを動作するようにCSSを下回る必要があります::

span {position: relative; display: block;}