試圖隨着時間的推移逐漸淡入div，使用jQuery

我試圖弄清楚如何讓4張圖片在頁面加載時依次淡入。試圖隨着時間的推移逐漸淡入div，使用jQuery

以下是我的（業餘）代碼：

下面是HTML：

<div id="outercorners"> 

<img id="corner1" src="images/corner1.gif" width="6" height="6" alt=""/> 
<img id="corner2" src="images/corner2.gif" width="6" height="6" alt=""/> 
<img id="corner3" src="images/corner3.gif" width="6" height="6" alt=""/> 
<img id="corner4" src="images/corner4.gif" width="6" height="6" alt=""/> 

</div><!-- end #outercorners-->

這裏是JQuery的：

$(document).ready(function() { 

$("#corner1").fadeIn("2000", function(){ 

$("#corner3").fadeIn("4000", function(){ 

    $("#corner2").fadeIn("6000", function(){ 

    $("#corner4").fadeIn("8000", function(){ 


    }); 

    }); 

}); 

});

這裏是CSS：

#outercorners { 
position: fixed; 
top:186px; 
left:186px; 
width:558px; 
height:372px; 
} 

#corner1 { 
position: fixed; 
top:186px; 
left:186px; 
display: none; 
} 

#corner2 { 
position: fixed; 
top:186px; 
left:744px; 
display: none; 
} 

#corner3 { 
position: fixed; 
top:558px; 
left:744px; 
display: none; 
} 

#corner4 { 
position: fixed; 
top:558px; 
left:186px; 
display: none; 
}

他們似乎只是眨眼間我，而不是按照我賦予他們的順序淡入。我應該使用queue（）函數嗎？而且，如果是這樣，我將如何在這種情況下執行它？

感謝您的協助。

來源

2010-06-15 heathwaller

從持續時間乘坐報價遠或使用一個預置 '慢' 或 '快' 等

$("#corner1").fadeIn(2000, function(){...

$("#corner1").fadeIn("slow", function(){...

不

$("#corner1").fadeIn("2000", function(){...

來源

2010-06-15 20:55:20 calumbrodie

太謝謝你了！它像一個魅力。太簡單了！ – heathwaller 2010-06-15 21:07:45

沒問題..... – calumbrodie 2010-06-15 21:12:14

字符串等於1而不是值，慢= 600和快= 200和默認= 400 – 2010-06-15 22:08:04

您可能需要將您的圖片包裝在<div>中並淡入淡出。像：

<div id="corner1"><img src="images/corner1.gif" width="6" height="6" alt=""/></div>

數字周圍的引號不應有所作爲。在預期數字的情況下，JS會隱式地將「2000」更改爲2000（除了使用+來連接字符串時）。

來源

2010-06-15 21:06:21 jasongetsdown

「引號周圍的數字不應該有所作爲」並非如此 - http://jsbin.com/ebiga/edit – calumbrodie 2010-06-15 21:23:04

Touché*在jsbin握手拳頭* – jasongetsdown 2010-06-16 03:33:23

如果你有很多圖片，那麼你可能想淡出他們與定時功能：

var x=0; // The corner counter 

function fading() { 
    $("#corner"+(++x)).fadeIn(2000); // Fade in the current corner 

    if (x==4) { // Last image to be faded in? 
    clearInterval(); // Stop interval 
    } 
} 

$(document).ready(function(){ 
    setInterval("fading()",1000); // Call function every second 
});

來源

2010-06-15 21:45:23

啊 - 也謝謝你。我認爲必須有更優雅的方式來編寫代碼。作爲初學者，我傾向於通過慢慢寫出所有東西來更好地理解事物。但是，您對上述代碼的評論非常感謝。我會試試這個！ – heathwaller 2010-06-17 01:51:29

沒問題。學習是一個有趣的過程。 :) – 2010-06-17 09:20:32

我知道這是一對夫婦個月大的問題，但我只是想發佈一個解決方案這可能有助於某人。我會這樣做：

var d= 0; 
$('#outercorners > img').each(function() { 
    $(this).delay(d).fadeIn(1000); 
    d += 1000; 
});

您可以將1000ms更改爲任何數字以滿足您的需要。請注意，它們不必相同。

演示：

http://jsfiddle.net/e5H5Y/

http://jsfiddle.net/e5H5Y/2/

好運

來源

2011-01-23 04:48:29 Mouhannad

試圖隨着時間的推移逐漸淡入div，使用jQuery

回答

相關問題