0

以下のスクリプトを使用して、特定のクラスのテキスト文字をランダムに色付けしています。これを拡張して、カラーリングが 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);
});
4

2 に答える 2

1

多分あなたはsetTimeout()以下のように使うことができます:

setTimeout(generateColors($('.color').text()), 10000);
于 2012-05-04T14:03:56.383 に答える
0

OK、私は最終的にこれを理解しました。setTimeout で正しい軌道に乗せてくれた sp00m に感謝します。既に使用していた getColor 関数を使用して、(カラー アニメーション プラグインを使用して) .colour div 内のスパンの色の変更をアニメーション化する次の setInterval 関数を追加しました。

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

}, 4000);

});

御馳走になります！

于 2012-05-04T21:28:41.807 に答える