jqueryhover图像淡入淡出交换

我一直在网上搜索一段时间，试图找到编写执行这个简单任务的jquery脚本的最佳方法：使用优雅的淡入淡出效果在hover时交换图像。 我找到了许多解决方案（某种方式来笨重和笨重），并将其缩小到我认为最好的两个方面：

Tutorial: Image hover/fade effect using jQuery

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

出于我的目的，我希望能够在一个页面上多次执行此hover交换。 该页面是http://www.vitaminjdesign.com 。 我目前在我的“服务导航”（不同类型的hover）上盘旋，但我想将它们应用于所有导航按钮，以及页脚中的社交图标。 所有的hover都是相同的 – 两个图像文件，一个在hover时淡入另一个，并在休假时返回。 什么是最好的方法来解决这个问题？ 也许上面的一个链接？

Answer 1

您也可以使用单个背景图像完成此操作，并淡入和淡出透明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"); }); }); 

可以在jsbin： demo-one上看到运行演示

更新：这是一个更通用的解决方案（不完整，但显示一些想法）： 演示二 。 只需将“fade-img”类添加到您想要具有此效果的任何图像。

 $(document).ready( function() { $(".fade-img") .before("
") .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"); }) ; }); 

Answer 2

我在您提供的第二个链接中选择了解决方案。 它简洁，干净，简单。

• 创建两个标签
• 将一个恰好放在另一个上（带有z-index CSS）
• 在hover时，将具有较高z-index的图像的不透明度淡化为0
• 这使它透明，您可以看到底层图像
• 当hover结束时，再次将不透明度淡化为1 。

完成

Answer 3

在$(document).ready()

 $('.imgbuttonclass').hover(function(){ $(this).animate({ backgroundImage: 'img2.png' },500); },function(){ $(this).stop(true).animate({ backgroundImage: 'img1.png' },500); }); 

编辑

如果您只想这样做： http ： //designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

然后使用jthompson的答案或只使用该页面中的代码。 如果你想使用两个单独的图像，你可能想看看这个：

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

和演示

它的作用是什么

它通过文档查看任何带有“ro”类的“img”或“input”标签。 翻转图像需要与普通图像命名相同，但最后使用“_o”。 例如，“image.gif”的翻转图像将是“image_o.gif”。 找到所有图像标签后，该脚本会预加载所有翻转图像并广告“鼠标hover”和“鼠标输出”事件。

Answer 4

使用jQuery的图像交叉淡入淡出过渡解释了一些方法来解决这个问题。

Answer 5

我认为这是最好的方法，因为它使用CSS Sprites来实现效果。 教程和演示都说明了如何使用CSS3和jQuery实现这一点。 看看下面：

http://css-tricks.com/fade-image-within-sprite/