jQuery:悬停链接时在div中动画(淡化)背景颜色或图像?

2022-01-22 00:00:00 background hover jquery html jquery-animate

我想在 redhotchilipeppers.com 上创建一个菜单.当您将链接悬停在右上角时，整个页面的背景颜色会发生变化.原始图像仍然在后面，只是颜色发生了变化.

I want to create a menu such as on redhotchilipeppers.com. When you hover a link in the top right the background color of the whole page change. The original image is still in the back, it's just the color that changes.

您可以在下面看到我是如何尝试实现它的.它的褪色太慢了，当我悬停一个链接然后另一个链接时，它首先褪色到第一个链接 bg 颜色，然后恢复正常，然后到第二个链接 bg 颜色.在 redhotchilipeppers.com 上，bg 颜色会立即消失.

Below you can see how I tried to accomplish it. It's fades way too slow and when I hover one link and then another it first fades to the first links bg color and then back to normal and then to the second links bg color. On redhotchilipeppers.com the bg colors fades right away.

这是我现在使用的代码:

Here's the code I use right now:

<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>

我做错了什么?还是有更好的方法来解决这个问题?

What am I doing wrong? Or is it a better way to solve this?

推荐答案

令人惊讶的是，jQuery 不会为背景颜色设置动画(没有插件).最简单的方法是使用 CSS 更改类并使用 CSS 过渡，如下所示:

Surprisingly, jQuery won't animate background colors (without a plugin). The easiest way is to change classes with CSS and use CSS transitions instead, like so:

$('#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/

无论如何它更符合语义:)

It's more semantic anyway :)

相关文章