一個接一個地淡入div
[英]Fade in divs one after another
問題描述
嘿那些人，我很擅長HTML和CSS，但只有jsut開始划傷jQuery的表面。 我希望在頁面加載上逐個淡入3個div。 到目前為止，我有這個
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().fadeIn(1500);
$('#3').hide().fadeIn(1500);
</script>
我聽說使用css將顯示設置為none對任何擁有非JavaScript瀏覽器的人來說都是一場噩夢，所以我使用hide函數來初始隱藏div。
但這只會一下子消失。 有任何想法嗎？
5 個解決方案
解決方案1
14 2010-09-22 11:12:24
你可以.delay()每個，以便在正確的時間淡入之前，例如：
$("#1, #2, #3").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
這會使它們按照它們在頁面中出現的順序逐漸消失，這通常是你所追求的，第一個是延遲0所以它是瞬間，第二個是延遲1500ms（所以當第一個完成時等）。 在.each()回調中， i是索引，從0開始，因此您可以使用它來快速計算正確的延遲。
這里的另一個優點是這種方法更容易維護，例如給他們一個類，你可以這樣做：
$(".fadeMe").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
然后，您需要在JavaScript端進行零維護以添加其他<div>元素以淡入淡出。
解決方案2
2 2010-09-22 11:15:46
淡入命令包含回調函數，請參閱文檔 。 這意味着您可以鏈接事件。
<script type="text/javascript">
$('#1, #2, #3').hide();
$('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
解決方案3
1 2010-09-22 11:14:07
<script type="text/javascript">
$('#1').hide().fadeIn(1500, function(){
$('#2').hide().fadeIn(1500, function(){
$('#3').hide().fadeIn(1500);
});
});
</script>
解決方案4
0 2012-11-24 18:42:52
以下是實現此效果的更簡潔，更通用的方法：在http://jsfiddle.net/BztLx/20/上查看
邏輯技巧依賴於fadeIn的回調功能，並使用.eq()作為所選元素的迭代器。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
var els = $(selectorText), i = 0;
(function helper() {
els.eq(i++).fadeIn(speed, helper).css("display", display);
if (callback && i === els.length) callback();
})();
}
sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
console.log("I am just an optional callback");
});
});
</script>
</head>
<body><style media="screen" type="text/css">
.hello {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
</style>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
</body></html>
解決方案5
0 2010-09-22 11:12:24
使用延遲功能如下：
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().delay(1500).fadeIn(1500);
$('#3').hide().delay(3000).fadeIn(1500);
</script>
逐漸淡入元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.