按順序顯示/隱藏圖像懸停

Question

我試圖隱藏和顯示圖像一個接一個地按順序使用jquery，顯示和保持顯示的最後一個圖像應該是.img2。下面的代碼不起作用，延遲似乎不起作用，它只是在同一時間隱藏它們並顯示.img2。

JQUERY

$(".start-page-img").hover(function() { 
      $('.img5').delay(6000).hide() 
        $('.img4').delay(7000).show() 
      $('.img4').delay(9000).hide() 
        $('.img3').show(10000).show() 
      $('.img3').delay(12000).hide() 
      $('.img2').delay(13000).show() 

     }); 

HTML

<div class="start-page-img"> 
           <img src="img/img1.jpg" class="img1" /> 
           <img src="img/img2.jpg" class="img2" /> 
           <img src="img/img3.jpg" class="img3" /> 
           <img src="img/img4.jpg" class="img4" /> 
           <img src="img/img5.jpg" class="img5" /> 
          </div> 

CSS

.start-page-img{ 
    width:400px; 
    float:left; 
    position:relative; 
    cursor:pointer; 

} 

.start-page-img img{ 
    position:absolute; 
    top:0; 
    left:0; 
    display:block; 
} 

.start-page-img .img1, 
.start-page-img .img2, 
.start-page-img .img3, 
.start-page-img .img4, 
{ 
    display:none; 
} 

Answer 1

我覺得我成功地創造出您是通過使用setTimeout()代替delay()去的效果。這是一個fiddle玩耍。請注意，有些呼叫show()和hide()有一個持續時間參數，在某種情況下，它有時與下一個動畫的開始重疊，因此時間就是一切。

有可能是一種更優雅的方式，可能與jQuery.animate()和/或jQuery.queue()。

希望它有幫助。

Answer 2

不知道這是你想要的東西： Fiddle Here

$(document).ready(function(){ 

//You can also do delay like this: 
//$('.img3').delay(3000).fadeOut(5000); 

//Or do hide like this: 
//$('.img5').delay(1000).hide(5000,function(){ 
//$('.img4').delay(2000).hide(5000,function(){ 
//$('.img3').delay(3000).hide(5000); 
//}); 
//}); 
//}); 


$('.hover_me').hover(function(){ 
$('.img5').fadeOut(5000,function(){ 
$('.img4').fadeOut(5000,function(){ 
$('.img3').fadeOut(5000); 
}); 
}); 
}); 
});