jQuery圖像懸停，具有交換和淡入淡出

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

上面的代碼可以使用，但是可以快速播放圖像，並在鼠標懸停時將鼠標懸停和fadeOut使其淡入淡出-有什么想法嗎？

提前致謝！

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/