2012-02-14 10 views
0
$('a').hover(function(){ 
    $(this).stop(); 
    $(this).animate({ 
     color: '#22373A' 
    }, 'slow'); 
}, function(){ 
    $(this).stop(); 
    $(this).animate({ 
     color: '#fe57a1' 
    }, 'slow'); 
}); 

これを使用して、ホバリング時に要素の不透明度を変更しますが、色の変更にはうまくいかないようです。どんなアイデアや提案ですか? documentation 1としてリンクの色にフェード効果

よろしく dennym

+4

http://api.jquery.com/animate/第一パラグラフ* * ...しかし、jQuery.Color()プラグインが使われていない限り、バックグラウンドカラーは使えません。* – Yoshi

+0

これは役に立ちました、おかげさまで、やっとトランジションに切り替えてくれました。:) –

答えて

5

代わりにCSSトランジションを使用したことはありますか?

HTML:

<a href="#">foo</a> 
<a href=#>bar</a>​ 

CSS:

html { 
    font: 2em/1.5 sans-serif; 
} 

a { 
    color: #22373a; 
    -webkit-transition: color 1s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: color 1s ease-out; /* Firefox 4+ */ 
    -ms-transition: color 1s ease-out; /* IE10+ */ 
    -o-transition: color 1s ease-out; /* Opera 10.5+ */ 
    transition: color 1s ease-out; 
} 

a:hover, a:focus { 
    color: #fe57a1; 
} 

デモ:*アニメーションのプロパティと値の後http://jsfiddle.net/HTDSJ/

+0

既にこれを、ありがとう –

0

、私はanimatecolor作品とは思いません。あなたは色理論に精通しているのかどうかはわかりませんが、カラーホイール上のある点から別の点に移動する方法は複数あります。それはすぐ次のポイントに行く必要がありますか?同心円の楕円を次の点に移動する必要があります(これは、50%の作業しかできません)。線形極関数に沿って移動すべきか?それはあまりにもあいまいであり、その理由から、私は彼らがそれを実装しないことを選んだと思う。ただし、jQuery plugin for thisがあります。

+0

Usin gトランジション、長い旅行アドバイスありがとう:) –

+0

@DennyMueller、CSS 3? –

+0

はい、Javaスクリプトよりはるかに簡単で軽量です –

関連する問題