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