jquery - 淡入淡出fadein

我做了一個簡單的圖像切換器，淡入淡出不同的標識。示例和完整的源代碼在http://bit.ly/ewrSgp。我淡出圖像，然後排隊src屬性更改，然後淡入。它似乎工作順利一段時間，但20秒左右後，它開始淡入圖像更改src之前，然後更改即刻和外觀醜陋。我做對了嗎？jquery - 淡入淡出fadein

運行變化的代碼是：

// fadeout old image, change to new and fadeback in. 
// Call function changeimage again. 
$(imToChange).fadeOut(600).queue(function (n) { 
    jQuery(this).attr('src', newimageSrc); 
    n(); 
}).fadeIn(1000, function() { 
    setTimeout(function() { 
     //recall image change function 
     changeImage(indexToChange); 
    }, o.delay); 
});

在此先感謝。

來源

2010-12-20 patnz

似乎爲我工作得很好！ – Andy 2010-12-20 21:51:04

我看到了一些閃爍，但不是很多。我注意到它發生在一個特定的標誌上，我想我第一次看到它，但不是下一次，這讓我覺得一旦它被加載，就沒有問題。一些想法：

這是否發生如果圖像都是本地（因此加載速度非常快）？
你試過preloading the images？
如果預加載工作，你認爲如何將它們全部放在精靈中？只有一個http請求。

來源

2010-12-20 21:56:24

感謝您的鏈接！我確實有一個預加載函數，但是我沒有把它存儲到緩存部分，所以我認爲它在加載之前一定是覆蓋了，但是這似乎已經修復了它。將研究你在下面建議的其他選項。謝謝。 – patnz 2010-12-21 07:44:42

我認爲你需要等待圖像完成加載。我會嘗試在可見區域之外或其他圖像之後顯示圖像，直到onload事件觸發，然後移動它並將其淡入適當的位置。

就是這樣。

var img = $("<img href='newimage.png' />").load(function() { movit(); fadeit(); }); 
$("#ahiddenelement").append(img);

來源

2010-12-20 21:45:39 Joel

另一種解決方案：不是改變圖像的來源，如何用jQuery的或.get()來替換它？然後您可以使用回調函數，該函數僅在加載完成後觸發，才能淡入。

來源

2010-12-20 21:59:00

指定寬度和高度爲img標記。

來源

2010-12-20 22:00:54 Lex

jquery - 淡入淡出fadein

回答

相關問題