jQueryスクリプトをカラーテキストにアニメーション化する

Question

私は以下のスクリプトを使用して、特定のクラスのテキスト文字をランダムに色付けしています。色を10秒ごとにアニメーション化するようにこれを拡張したいと思います。このアイデアは、アニメーションがページロード時にテキストを色付けし、ある色のセットから別の色にアニメーション化するのに使用される同じgenerateColors関数を使用するということです。

アニメーションの**で囲まれたコードを追加しましたが、動作しません。私もjQuery color animation pluginをインクルードしましたが、私は下のコードを使って実際に色をアニメーション化するのではなく、おそらく不可能なHTMLをアニメーション化しようとしています。私はカラープラグインを使用して色をアニメーション化する方法がわかりませんが、何か助けになると嬉しいです。

おかげで、

ニック

$(document).ready(function() { 

     $('.colour').each(function() { 
     var text = $(this).text().split(''), 
     normal = generateColors(text), 
     **animate = generateColors(text);** 

    $(this).html(normal); 

    **$(this).animate( 
     function(event) { $(this).html(animate) });** 

    }); 
}); 

function generateColors(characters) { 
    var result = ""; 
    var i = 0; 
    for(i=0; i < characters.length; i++) { 
     result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>"; 
    } 

    return result; 
}   

function getColor() { 
    var colList = ['#942525', '#9E2921','#A4392A', '#8C381E', '#8E4224', '#7C3E21','#B64B26', '#B75D29', '#7F5B24','#665824','#89782E', '#49411F', '#4E512A', '#5E7D37', '#567D38', '#278C8C', '#387872','#1D6362','#257377', '#257377', '#8D3594']; 

    var i = Math.floor((Math.random()*colList.length)); 
    return colList[i]; 
} 

のsetInterval機能

setInterval(function(){ 

$(".colour").each(function colourChange() { 
     var text = $(this).text().split(''); 
     var normal = generateColors(text); 
     $(this).html(normal); 
    }); 
}, 3000); 
}); 

Answer 1

怒鳴る示すように、たぶん、あなたはsetTimeout()を使用することができます。

setTimeout(generateColors($('.color').text()), 10000); 

Answer 2

OK、私はこれを最後に考え出しました。 setTimeoutで正しい軌道に乗ってくれたsp00mに感謝します。

setInterval(function(){ 
    $(".colour span").each(function() { 
     var colourChange=getColor(); 
     $(this).animate ({ 
     color: colourChange, 
     },2000);  
    }); 

}, 4000); 

}); 

を御馳走に動作します

：私は、私はすでに使用していたGETCOLOR機能を使用して（カラーアニメーションプラグインを使用して）.colourのdiv要素にスパンの色を変更するアニメーション化し、次のsetInterval機能を追加しました！