0

jqueryを使用して画像を次々と非表示にして表示しようとしています.表示して表示したままにする最後の画像は.img2. 次のコードは機能しません。遅延が機能していないようです。それらすべてを同時に非表示にし、.img2 を表示するだけです。

Jクエリ

 $(".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 に答える