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);
});
});
});
});

在悬停时按顺序显示/隐藏图像

2 个答案: