0

我正在尝试使用jquery按顺序依次隐藏和显示图像，最后一个显示和保持显示的图像应该是.img2。以下代码不起作用，延迟似乎不起作用，它只是同时隐藏它们并显示.img2。

查询

 $(".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;   
}
4

2 回答 2

1

我想我设法通过使用setTimeout()而不是delay(). 这是一个可以玩的小提琴。注意，有些调用show()并hide()有一个持续时间参数，在某种情况下它会以某种方式与下一个动画的开始重叠，所以时间就是一切。

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

希望能帮助到你。

于 2013-03-01T16:05:53.213 回答
0

不确定这是你想要的： 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);
});
});
});
});
于 2013-03-01T16:12:16.453 回答