jQuery图像交叉淡入淡入悬停

因此，我一直在寻找一个插件或jQuery代码，以便将其放入我正在开发的一个站点，该站点允许轻松地在hover上切换图像。我发现了这个很棒的小工具：。。。完全符合我的需要，除了切换图像，而不是交叉淡入悬停。我知道我可以创建一个悬停的图像，我将背景更改为淡入图像（即CSS精灵），但还没有找到一个像上面的链接那样简单的插件，我可以在图像末尾的默认值为“_off.jpg”的情况下在我的站点上的所有按钮上插入一个类，然后让jQuery将“_off.jpg”更改为“_on.jpg”。不幸的是，我正在工作的这个网站有很多按钮，必须仔细地创建一个背景变化悬停的情况将是如此耗时

有人对jQuery和/或插件有什么建议吗？他们发现这些插件可以简化他们的生活

---

谢谢

如果您只需要快速淡入淡出效果，可以设置不透明度的动画。但不会给你一个交叉褪色

$(".img-swap").hover(
    function(){
        this.src = this.src.replace("_off","_on");
        $(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
    },
    function(){
        this.src = this.src.replace("_on","_off");
        $(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
});

---

请参见演示-

我打算提出一些与@Lee类似的建议，只是它不是交叉淡入淡出，而是淡入淡出

虽然这并不能满足您对“简单”下拉解决方案的需求，但一种方法是将图像包含在另一个元素中，该元素的背景中有悬停图像。然后很容易淡入/淡出“关闭”图像，显示“打开”图像的背景

实现这一点的一种方法（必须自动设置这些背景样式）是使用JQuery迭代具有particalar类的所有图像，然后将其容器的背景图像设置为适当的src（使用与上面类似的代码将“\u off”替换为“\u on”）

---

希望这能有所帮助。

所以，你想让jQuery找到所有具有特定“关闭”属性的图像，并将其交叉淡入“打开”图像？thnx用于发布。这项功能似乎有点烦人。这就像图像试图加载悬停图像而不是交叉淡入。我知道我会在某个地方找到它！：）这非常好。唯一的事情是通过CSS包含悬停或以另一种方式预加载。尽管如此，我还是喜欢这个剧本。