Question

所以我一直在寻找插件或jQuery代码，以便放入我正在处理的网站中，以便轻松切换图像。我找到了这个非常棒的小工具：http://www.designchemical.com/blog/index.php/jquery/quick-and-easy-jquery-image-swap/ ...正是我所需要的，除了它切换图像但不是交叉淡入淡出。我知道我可以创建一个onhover的图像我改变背景以淡化图像（即CSS sprites）但是还没有找到一个像上面的链接一样简单的插件，我可以在我的所有按钮上放入一个类在图像末尾默认为“_off.jpg”的网站，然后将jQuery更改为“_off.jpg”到“_on.jpg”。不幸的是，我正在研究的这个网站有很多按钮，并且必须精心创建一个悬停情况，背景改变会非常耗时。

任何人都有关于jQuery和/或插件的任何建议，他们只是发现了他们的生活？

谢谢！

Answer 1

如果您只想要快速淡化效果，可以设置不透明度的动画。虽然不会给你一个交叉淡入淡出

$(".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' });
});

请参阅演示 - http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_fade.htm

Answer 2

我打算提出一些与@Lee相似的东西 - 除了它不会是一个交叉淡入淡出，而是一个淡出和淡出。

虽然这并未满足您对“简单”插入式解决方案的需求，但一种方法是将图像封装在另一个在背景中具有悬停图像的元素中。然后，淡入/淡出“关闭”图像，显示背景“开启”图像会很简单。

解决此问题的一种方法（必须自动设置这些背景样式）将使用JQuery迭代具有特定类的所有图像，然后将其容器的背景图像设置为适当的src（具有类似的代码）如上所述，用'_on'代替'_off'。

希望有所帮助。

jQuery图像交叉淡入淡出

2 个答案: