jQuery图像悬停与交换和淡入淡出答案

【问题标题】：jQuery image hover with swap and fadejQuery图像悬停与交换和淡入淡出
【发布时间】：2011-03-10 20:32:23
【问题描述】：

jQuery(document).ready(function(){
   // Change the image of hoverable images
   jQuery("#image-map")
        .mouseover(function() { 
            var src = jQuery(this).attr("src").replace(".gif", "_close.gif");
            jQuery(this).attr("src", src);
        })
        .mouseout(function() {
            var src = jQuery(this).attr("src").replace("_close.gif", ".gif");
            jQuery(this).attr("src", src);
        });
});

上面的代码很好用，但是快速播放了通过鼠标悬停使图像淡入和在鼠标移出时淡出 - 有什么想法吗？

提前致谢！

【问题讨论】：

标签： jquery

【解决方案1】：

您可以在已定义的函数中添加淡入/淡出，如下所示：

$(document).ready(function(){
// Change the image of hoverable images
var openGif = $("#image-map").attr("src");
var closedGif = openGif.replace(".gif", "_close.gif");
$("#image-map")
    .mouseover(function() { 
        $(this).fadeOut(function(){
            $(this).attr("src", closedGif);
            $(this).fadeIn();
        });
    })
    .mouseout(function() {
        $(this).fadeOut(function(){
            $(this).attr("src", openGif);
            $(this).fadeIn();
        });
    });
});

我还用快捷方式“$”更改了长版本的 jQuery。下载时节省一点打字和字节数:)

【讨论】：

感谢工作！我不得不使用 jQuery 而不是 $ 因为某些原因在 wordpress 中不起作用！但是是的，我同意我个人会使用 $ 的快捷方式 - 你知道让它混合的好方法吗？
当然，你可以使用jQuery(document).ready(function($){ //free to use $ in here! :) })这样$的范围仅限于你的功能，详细阅读here。

【解决方案2】：

您可以使用 jquery API：fadeIn 和 fadeOut.. http://api.jquery.com/fadeIn/http://api.jquery.com/fadeOut/

【讨论】：

是的，我知道，但我无法在这些功能中使用它