トランジション付きの簡単なjQuery/CSS3メニュー

Question

jQueryまたはCSS3を使用して素敵なトランジション効果を持つシンプルなメニューを作成しようとしています。問題は、3つの異なるホバーとアクティブな状態（つまり、異なる色）の3つのボタンが欲しいということです。しかし、何が良いですか？ jQueryまたはCSS3？私はIE9がCSS3をサポートしていないことを知っています。このメニューはjQueryよりもCSS3で実装する方が簡単だと思います。私のメニューhereを参照してください。これは、jQueryのチュートリアルを使って作成したものです。hereです。

ご覧のとおり、2番目のボタン（赤色）はスムーズに表示されず、3番目のボタンはスムーズに切り替わります。私はこの3つすべての効果が必要ですが、各ボタンは異なる色をしています。

これはCSS3で同じ効果を得る方法ですか？

.button1 { 
    background-image: url('test.png'); 
} 

.button1:hover { 
    background-image: url('test_hover.png'); 
    transition: background-image .15s ease-in; 
    -webkit-transition: background-image .15s ease-in; 

私はすべてのことを正しく説明しました。説明が必要な場合は、教えてください。ありがとうございました。

Answer 1

CSS3トランジションを使用すると、ブラウザがそれらを認識しないと無視されます。この場合、トランジションは単にインスタントフリップに回帰します。

sprite imageを使用することをおすすめします。ホバー上の画像を変更する代わりに、画像の位置を変更するだけです。

.button1 { 
    background-image: url('test_sprite.png'); 
    background-position: top; 
} 

.button1:hover { 
    background-position: bottom; 
    transition: background-position .15s ease-in; 
    -moz-transition: background-position .15s ease-in; 
    -o-transition: background-position .15s ease-in; 
    -webkit-transition: background-position .15s ease-in; 
    -ms-transition: background-position .15s ease-in; 
}