jQuery的：图像褪色到另一个图像

Question

我有jQuery中下面的代码：

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

图像的变化，现在工作这么： - 此搜索淡出 - 不显示图像 - 镜像2褪色-in

我该如何解决这个问题，即图像在一起褪色，没有一段时间没有图像的时间？

这里的网站，在这里你可以看到我的意思：

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

当你徘徊在一个图像，在图像加载之前那里有一个短空空间 我怎样才能解决这个问题。 ？

Answer 1

使用两个不同的图像。让他们通过设置其CSS属性“位置：绝对”来覆盖相同的空间。将第一个设置为false，同时将另一个设为false。您可能需要一个适当的位置：相对位置：绝对可能会导致他们表现出...意外。

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

Answer 2

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

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

Answer 3

添加[队列：假]到动画将允许多个动画同时

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