javascript - jQuery:图像淡入另一个图像

Question

我在 jQuery 中有以下代码:

if (klick = true) $(this).fadeOut('fast', function(){
    $(this).attr("src", "../img/daniel_effects.png").fadeIn();
});

现在图像的改变是这样的:- Image1 淡出- 不显示图像- Image2 淡入

我该如何解决这个问题，即图像一起褪色，并且它们之间没有很短的时间没有图像？

这是您可以明白我的意思的网站:

http://anthraxbeats.com/pages/biography.html

当您将鼠标悬停在图片上时，在加载图片之前会有一小段空白。我该如何解决？

Answer 1

使用两个不同的图像。通过设置它们的 css 属性“position: absolute”让它们覆盖相同的空间。淡出第一个，同时将另一个设置为 false。您可能需要一个带有 position: relative 的适当容器，因为 position: absolute 可能会导致它们的行为......出乎意料。

#container{
position: relative;
width: 100px;
height: 100px;
}
.img1, .img2{
position: absolute;
width: 100%;
}