javascript - 如何使用 jquery 直接淡入另一个图像(没有任何延迟)？

Question

我的代码有效，但它不会直接淡入第二张图片:淡出第一张图片 -> 延迟 -> 淡入第二张图片。如何直接淡入第二张图像？

我的 jquery 代码

$(document).ready(function() {
    var std = $(".fadeim").attr("src");
    var hover = std.replace(".png", "-hover.png");
    $(".fadeim")
        .mouseover(function() {   
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", hover);  
                $(this).fadeIn("fast");  
            });  
        })  
        .mouseout(function() {  
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", std);  
                $(this).fadeIn("fast");           
            });  
        })  
    }); 
});

Answer 1

您可以执行以下 [我通常做的]:

您可以查看我的测试链接:http://jsfiddle.net/fJFmx/1/

我为图像设置了一个容器[固定宽度和高度]。将图像的样式设置为 position:absolute 和固定尺寸。

HTML 示例:

<div id='slideContainer'>
    <img src='http://www.ct4me.net/images/dmbtest.gif' />
    <img src='http://pievscake.com/images/test.jpg' />
</div>

然后是 Jquery:

$(function() {

    $('#slideContainer img:first').fadeIn();

    $('#slideContainer').hover(function() {
        $('#slideContainer img:first').fadeOut();
        $('#slideContainer img:last').fadeIn();
    }, function() {
        $('#slideContainer img:first').fadeIn();
        $('#slideContainer img:last').fadeOut();
    });

});

CSS

#slideContainer {border:1px solid #ffcc00;width:50px; height:50px;}
#slideContainer img {position:absolute; width:50px; height:50px; display:none;}

希望这对您有所帮助。