1

redhotchilipeppers.com のようなメニューを作りたいです。右上のリンクにカーソルを合わせると、ページ全体の背景色が変わります。元の画像はまだ後ろにあります。色が変わっただけです。

以下に、私がそれを達成しようとした方法を示します。フェードが遅すぎて、あるリンクをホバーしてから別のリンクをホバーすると、最初のリンクの背景色にフェードし、次に通常に戻り、次に2番目のリンクの背景色にフェードします。redhotchilipeppers.com では、背景の色がすぐに消えます。

私が今使っているコードは次のとおりです。

<head>
<style>
body {
margin:0 auto;
top:0;
left:0;
height:100%;
width:100%;
background:url(images/bg.jpg);
}

#container {
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
opacity:0.4;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
background-color:#fff;
z-index:-1;
}

.link {
position:inherit;
z-index:1;
float:right;
padding-top:100px;
}
</style>
</head>

<body>
<div id="container"></div>
<div class="link">
<a href="" id="linktomouseover"><img src="images/menu_start.png" alt="" /></a><a href="" id="linktomouseover2"><img src="images/menu_contactus.png" alt="" /></a>
</div>

<script> 
jQuery('#linktomouseover').hover(function() { 
jQuery('#container').animate({ backgroundColor: "#2154b9"}, 500);
}).mouseleave(function(){
jQuery('#container').animate({ backgroundColor: "#ffffff"}, 500); 
});

jQuery('#linktomouseover2').hover(function() { 
jQuery('#container').animate({ backgroundColor: "#ac1c27"}, 500);
}).mouseleave(function(){
jQuery('#container').animate({ backgroundColor: "#ffffff"}, 500); 
});
</script>
</body>

私は何を間違っていますか？それとも、これを解決するためのより良い方法ですか？

4

1 に答える 1

3

驚いたことに、jQueryは（プラグインなしで）背景色をアニメーション化しません。最も簡単な方法は、CSSでクラスを変更し、代わりにCSSトランジションを使用することです。

$('#linktomouseover').hover(function() {
    $('#container').addClass('hover1')
}, function() {
    $('#container').removeClass('hover1')
});

#container {
    transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
}

jsFiddle： http: //jsfiddle.net/kkzLW/

とにかくそれはより意味論的です:)

于 2012-04-10T13:56:57.360 に答える