アニメーションによる色の変更を使用して検索語を強調表示するには

Question

私は単語の雲があり、そこからいくつかの固有の事前定義された単語を選び、色をスムーズに変更したいと考えています。基本的に私はこの、

// font color animation 
$(".second a").hover(function() { 
$(this).animate({ color: "#00eeff" }, 400); 
},function() { 
$(this).animate({ color: "#FFFFFF" }, 500); 
}); 

代わりにホバーは、私はちょうどsetTimeout関数は、変更をトリガしたいトリガーというのをやってみたいです。どうやってやるの？どんな助けにも大いに感謝します

Answer 1

ないあなたはどちらか欲しいものを確認してください、私はちょうど（似た何かをする方法の例を書いて、私は戻ってきませんよ、私の人生の15分を費やして、すべて同じではUIを使用していますカラーアニメーション用）。

var words = ['Lorem', 'Tatum'], 
    color = 'red', 
    elems = [], 
    T1 = setInterval(randomRed, 1000); 

$('#yourelements').each(function() { 
    if ($(this).text() == words[0] || $(this).text() == words[1]) { 
     elems.push($(this)); 
    } 
}); 

//I cut this down from the example in the fiddle, elements could be filtered in the below function instead? 

function randomRed() { 
    $(elems).each(function() { 
     var r1 = Math.random()*500, 
      r2 = Math.random()*1000; 
     $(this).delay(r1).animate({color: color}, r2, function() { 
      var r3 = Math.random()*500, 
       r4 = Math.random()*1000; 
      $(this).delay(r3).animate({color: 'black'}, r4); 
     }); 
    }); 
} 

ここで問題が何であるかは明らかではないfiddle!

Answer 2

まあ、実際には、あなたが探しているトリガーのようなものであれば、setTimeout ...を使うことができます。また、あなたは、私はそれはあなたが求めているものだと思う

var someMilliseconds = 500; 
setTimeout(function() { 
    // font color animation 
    $(".second a").animate({ 'color' : '#00eeff' }, 400); 
}, someMilliseconds); 

...それはこのようなものになるだろう

各jQueryのようなものを使用してコレクションを反復処理する必要があるでしょうか？ :) .animate()のためのjQueryのドキュメントから

Answer 3

：

すべてのアニメーション化されたプロパティは、以下に示すよう除き、単一の数値、 にアニメーションする必要があります。数値以外のほとんどのプロパティは jQuery.Color()プラグインが使用されていない限り、基本的なjQuery機能（たとえば、幅、高さ、 または左にアニメーションできますが背景色は使用できません）を使用してアニメーション化することはできません。特に指定しない限り、プロパティ値は ピクセル数として扱われます。該当する場合は、単位emと％は と指定できます。

出典：

短い答え：あなたはjQueryを使って色をアニメーション化するプラグインが必要。あなたが継続的にリンクの色をアニメーション化したいならば、setInterval()を見てみましょう、それは意志、またhttp://jsfiddle.net/f4PEL/1/

：ここ

は、jQueryのドキュメントを使用することを示唆していることをプラグインとsetIntervalコールを使用してデモです1回ではなく間隔で実行します。 setTimeout()と同じ関数を再帰的に呼び出すことによって、この間隔の動作を模倣することもできます。

setInterval()のためのドキュメント：https://developer.mozilla.org/en/DOM/window.setInterval