简体繁体 English

jQuery，如何为背景中的图像设置覆盖不透明度动画

[英]jQuery, how to animate overlay opacity, with image in background

原文 2012-09-20 08:03:35 9 2 javascript/ jquery/ html

I'm trying to animate a overlay using opacity when you hover the element, however it does not work. 当您将元素悬停时，我正在尝试使用不透明度为覆盖动画，但是它不起作用。 I can easily do it without the animation, but I would like to get a fade effect. 我可以不用动画就可以轻松地做到这一点，但是我希望获得淡入淡出的效果。 I'm trying to achieve this with jQuery. 我正在尝试使用jQuery实现这一目标。

I want the overlay to not be visible when the image is hovered. 我希望将鼠标悬停在叠加层上不可见。

Take look at below jsfiddle-example: 请看下面的jsfiddle-example：

http://jsfiddle.net/jem2M/1/ http://jsfiddle.net/jem2M/1/

I've been looking for examples, but most of them use fadeIn and fadeOut, and I can't use that because the element should always be visible, only the opacity should change on hover. 我一直在寻找示例，但是其中大多数都使用fadeIn和fadeOut，但是我不能使用它们，因为该元素应该始终可见，只有不透明度在悬停时才会改变。

Solved: Forgot to enclose the selector. 解决：忘记封闭选择器。 Working example: http://jsfiddle.net/jem2M/4/ 工作示例： http : //jsfiddle.net/jem2M/4/

2 个解决方案

$('.bghover #background img') - you forgot (twice) to enclose your selector into quotes. $('.bghover #background img') -您忘记了两次将选择器括在引号中。

example fiddle : http://jsfiddle.net/jem2M/4/ 小提琴示例： http : //jsfiddle.net/jem2M/4/

I've just opened http://jsfiddle.net/jem2M/4/ (using my chrome 21) and it works fine. 我刚刚打开了http://jsfiddle.net/jem2M/4/ （使用我的chrome 21），并且工作正常。 When you mouse over the image it animates the opacity to 1 , and when the mouse goes out the opacity is modified to 0.75 当您将鼠标悬停在图像上时，它会将不透明度设置为1，当鼠标熄灭时，不透明度将被修改为0.75。