jquery圖像淡入淡出時間由X

如何讓我的圖像一個接一個地出現？我目前正在使用Jquery淡入淡出來讓我的圖像淡入淡出，但我希望它們在不同的時間開始。無論如何，我可以推遲從淡入淡出的圖像？很快？jquery圖像淡入淡出時間由X

<script type="text/javascript"> 
$(document).ready(function(){ 

window.onload = function() { 

$('.fader1').hide().fadeIn(3000); 
$('.fader2').hide().fadeIn(9000); 
$('.fader3').hide().fadeIn(6000); 
}; 


}); 
</script> 


<div class="fader1"><img src="demo.jpg"></div> 
<div class="fader2"><img src="demo.jpg"></div> 
<div class="fader3"><img src="demo.jpg"></div>

來源

2011-03-11 user342391

您可以使用fadeIn（）的回調函數在前一個圖像完成時開始淡入。嘗試是這樣的：

$('.fader1').fadeIn(3000, function() { 
    $('.fader2').fadeIn(3000, function() { 
    $('.fader3').fadeIn(3000); 
    }); 
});

但你< DIV開始>「已隱藏S：

<div class="fader1" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader2" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader3" style="display: none;"><img src="demo.jpg"></div>

Refernce：jquery fadeIn()

來源

2011-03-11 15:34:29 Groovetrain

是的，這就是delay function。

$('.fader1').hide().fadeIn(3000); 
$('.fader2').hide().delay(1000).fadeIn(9000); 
$('.fader3').hide().delay(2000).fadeIn(6000);

開始它們間隔一秒鐘。

Live example（使用下面稍微偏離主題的更新，並略有不同的延遲時間，但你的想法）

題外話：我想我會隱藏圖像早於window.onload。這隻會在每一件最後的東西都完全加載時觸發，所以現在大體上圖像會出現，然後消失，然後淡入。

您可能會考慮在您的頂部執行此操作<body>元件：

<body> 
<script>document.body.className = "loading";</script>

和添加此CSS：

body.loading .fader1, body.loading .fader2, body.loading .fader3 { 
    display: none; 
}

然後

jQuery(function($) { 

    $(window).load(function() { 
     $('body').removeClass("loading"); 
     $('.fader1').hide().fadeIn(3000); 
     $('.fader2').hide().delay(1000).fadeIn(9000); 
     $('.fader3').hide().delay(2000).fadeIn(6000); 
    }); 
});

...或類似。

來源

2011-03-11 15:32:31

http://api.jquery.com/delay/

.delay（）函數

來源

2011-03-11 15:35:13 aphonicx

jquery圖像淡入淡出時間由X

回答

相關問題