Question

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);
        });
});

上面的代码是一种享受，但是快速播放使用hover和fadeOut鼠标输出图像fadeIn - 任何想法？

提前致谢！

Answer 1

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

$(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。在下载时节省一点打字和字节：）

Answer 2

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

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

2 个答案: