jquery 悬停图像淡入淡出交换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1857827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery hover image fade swap
提问by JCHASE11
I have been searching online for awhile, trying to find the best way to write a jquery script that does this simple task: swapping an image on hover with an elegant fade effect. I have found many solutions (some way to cumbersome and clunky), and narrowed it down to what I see as the two best:
我已经在网上搜索了一段时间，试图找到编写执行此简单任务的 jquery 脚本的最佳方法：用优雅的淡入淡出效果交换悬停时的图像。我找到了许多解决方案（某种方式来解决繁琐和笨重的问题），并将其范围缩小到我认为最好的两个：
http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
For my purposes, I want to be able to do this hover swap numerous times on one page. The page is http://www.vitaminjdesign.com. I currently have hovers on my "services nav" (different type of hover) but I want to apply them to all of the nav buttons, as well as the social icons in the footer. All of the hovers will be the same- two image files, one fading in to the other on hover, and returning on leave. What is the best possible way to go about this? One of the above links perhaps?
出于我的目的，我希望能够在一页上多次执行此悬停交换。该页面是http://www.vitaminjdesign.com。我目前在我的“服务导航”（不同类型的悬停）上悬停，但我想将它们应用于所有导航按钮以及页脚中的社交图标。所有的悬停都是相同的 - 两个图像文件，一个在悬停时淡入另一个，并在离开时返回。解决此问题的最佳方法是什么？也许是上述链接之一？
回答by jthompson
You could also accomplish this using a single background image, and fading in & out a transparent div. Here's a quick example, which could be extended to work automatically for a single class of image:
您也可以使用单个背景图像并淡入和淡出透明 div 来完成此操作。这是一个快速示例，它可以扩展为自动用于单个图像类：
$(document).ready( function() {
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(255, 255, 255, 0.5)"
})
.mouseover( function() {
$(this).fadeOut("slow");
})
;
$("#test-img").mouseout( function() {
$("#mask-div").fadeIn("slow");
});
});
Running demo can be seen at jsbin: demo-one
运行demo可以在jsbin看到：demo-one
UPDATE: Here is a more generic solution (incomplete, but shows some ideas): demo-two. Just add the class "fade-img" to any image you want to have this effect.
更新：这是一个更通用的解决方案（不完整，但显示了一些想法）：demo-two。只需将类“fade-img”添加到您想要具有此效果的任何图像即可。
$(document).ready( function() {
$(".fade-img")
.before("<div class='fade-div'></div>")
.each( function() {
var img = $(this);
var prev = img.prev();
var pos = img.offset();
prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left })
.mouseover( function() {
$(this).fadeOut("slow");
}
);
})
.mouseout( function() {
$(this).prev().fadeIn("slow");
})
;
});
回答by jitter
I opt for the solution in the second link you provided. It is short, clean and simple.
我选择了您提供的第二个链接中的解决方案。它简短、干净、简单。
- Create two
<img>tags - Position one exactly over the other (CSS with
z-index) - On hover fade the opacity of the image with higher
z-indexto0 - This makes it transparent and you see the underlying image
- When hover ends fade opacity to
1again.
- 创建两个
<img>标签 - 将一个完全放在另一个上（CSS with
z-index） - 在悬停时，图像的不透明度逐渐变高
z-index至0 - 这使它透明，您可以看到下面的图像
- 当悬停结束时，不透明度
1再次消失。
Done
完毕
回答by blindrc
I think this is the best method because it uses CSS Sprites to achieve the effect. The tutorial and demo both illustrate how to achieve this using CSS3 as well as jQuery. Check it out below:
我认为这是最好的方法，因为它使用 CSS Sprites 来实现效果。本教程和演示都说明了如何使用 CSS3 和 jQuery 实现这一点。看看下面：
回答by Brandon Henry
inside $(document).ready()
里面 $(document).ready()
$('.imgbuttonclass').hover(function(){
$(this).animate({
backgroundImage: 'img2.png'
},500);
},function(){
$(this).stop(true).animate({
backgroundImage: 'img1.png'
},500);
});
edit
编辑
if you only want to do this: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
如果你只想这样做：http: //designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
then use jthompson's answer or just use the code from that page. if you want to use two separate images, you may want to have a look at this:
然后使用 jthompson 的答案或仅使用该页面中的代码。如果你想使用两个单独的图像，你可能想看看这个：
http://peps.ca/blog/easy-image-rollover-script-with-jquery/
http://peps.ca/blog/easy-image-rollover-script-with-jquery/
and the demo
和演示
what it does is
它的作用是
It looks through the document for any “img” or “input” tags with a class of “ro”. The rollover image needs to be named the same as the normal image but with “_o” at the end. For example, the rollover image for “image.gif” will be “image_o.gif”. After finding all the image tags, the script preloads all of the rollover images and ads the “mouseover” and “mouseout” events.
它在文档中查找任何具有“ro”类的“img”或“input”标签。翻转图像需要与普通图像命名相同，但末尾带有“_o”。例如，“image.gif”的翻转图像将为“image_o.gif”。找到所有图像标签后，脚本会预加载所有鼠标悬停图像并投放“mouseover”和“mouseout”事件。
回答by Scott Evernden
Image Cross Fade Transition with jQueryexplains some ways to approach this ..
Image Cross Fade Transition with jQuery解释了一些解决这个问题的方法..
