JavascriptまたはjQueryのテキストカラースライド効果？

Question

私は基本的なナビゲーションをしようとしています、すべてのリンクはプレーンテキストであり、現在のページは別の色で表示されます。

現在のホバリングナビゲーションアイテムとは異なる色の「スライド」をどうやって持って行くのですか？

例：http://www.branded07.com/ リンクの背景の代わりに、テキストの色スライドを使用できますか？

Answer 1

これはタフなものです:)私はあなたが達成しようとしているのか理解として、あなたは、単一の単語を持っている場合、たとえば、赤色で表示された単語COLOR、に最初に色を変えるためにCを、次にOを、そしてLを等しくして、次の色が左から右に滑っているように見えます。私は正しい？

まず、jQueryコアを使用して色をアニメーション化することはできませんが、jQuery.color（）プラグインを使用できます（https://github.com/jquery/jquery-colorを参照）。このプラグインを使用すると、作業中のテキスト（ホバーされたメニュー項目）をつかみ、各文字を切り取り、アニメーション化するためのタイムアウトを少しずつ使用して、それらを1つずつアニメートすることができます。

私はjsfiddleであなたに例を構築している、それをチェックアウトし、あなたのニーズに合わせてカスタマイズ：http://jsfiddle.net/xhCa2/

Answer 2

あなたがこれまで述べてきたことから、あなたはこのようなことを意味すると思いますか？ http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

あるいは少なくとも、それはあなたがjQueryのUI（toggleClass機能への拡張）を使用する必要が出発点

Answer 3

次のようになります。

HTML：

<div class="menu"> 
<span class="menu-item">Menu 1</span> 
<span class="menu-item">Menu 2</span> 
<span class="menu-item">Menu 3</span> 
<span class="menu-item">Menu 4</span> 
</div> 

のCss：

.menu-item 
{ 
    color: black; 
} 

.menu-item-hover 
{ 
    color: red; 
} 

Javascript：

$(".menu-item").each(function() { 
    $(this).hover(function() { 
     $(this).toggleClass('menu-item-hover', 500); 
    }); 
}); 

デモ：http://jsfiddle.net/nQ6Ze/