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

将 [queue: false] 添加到动画将允许同时多个动画

var $theOtherThing = $(this).attr("src", "../img/daniel_effects.png");

if(klick === true){
    $(this).animate({
        "opacity": "0"
     }, {
        duration: 200,
        queue: false
     });
    $theOtherThing.animate({
        "opacity": "1"
     }, {
        duration: 200,
        queue: false
    });

Answer 2

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

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

Answer 3

您可以尝试在点击处理程序之外预加载您的图像。像这样的东西应该工作：

(new Image()).src = "../img/daniel_effects.png";