私はこのメニュー構造を持っています:
http://jsfiddle.net/Rochefort/szL2C/
全て大丈夫。しかし、jQueryを介してホバー効果がフェードしたいです。これどうやってするの?
私はこのメニュー構造を持っています:
http://jsfiddle.net/Rochefort/szL2C/
全て大丈夫。しかし、jQueryを介してホバー効果がフェードしたいです。これどうやってするの?
次のように、css3 でトランジションを使用してこれを実現できます。
.menu-item
{
// In the transition you define the property that
// you want a transition attached to and the duration
transition: background .5s;
-moz-transition: background .5s; /* Firefox 4 */
-webkit-transition: background .5s; /* Safari and Chrome */
-o-transition: background .5s; /* Opera */
}
.menu-item:hover
{
background: #CCC; // Or whatever color you choose
}
ソース: http://www.w3schools.com/css3/css3_transitions.asp
編集
あなたの問題に対するjQueryの解決策は次のとおりです。
$(document).ready(function(){
$('#right_menu li').hover(function() {
$(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
$(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});
});
ただし、ここにあるjQueryカラー ライブラリを含める必要があります。また、css で設定した :hover background-color を削除する必要があります。
お役に立てれば。
Yan Kun が言ったように、jquery カラー アニメーション ライブラリを含める必要があります: http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js
コードの挿入を改善します。stop()
マウスが数回上にあるときのループを避けるために文。
$('.links yan-menu li a ').hover(function() {
$(this).stop();
$(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
$(this).stop();
$(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});
これとjquery color animations pluginに必要なコードは数行だけです。
$('.links yan-menu li a ').hover(function() {
$(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
$(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});
もちろん、CSSコードを削除して、コードをページに適切に追加する必要があります