1

jQuery を使用して簡単な作品を作成し.animate()、Safari、Chrome、および Firefox で完全に動作しますが、IE で開くと、最初のアニメーションが開始され、then.fadeOut 部分が始まる場所に直接ジャンプします。これをIEで動作するように変更する方法はありますか?

jQuery

$(document).ready(function(){   

//ACC LOGO COMES IN
$("#img1").animate({left:'+=470'},1000);
$("#img1").animate("pause");
$("#img1").animate("pause");
$("#img1").animate("pause");
//AVERY LOGO COMES IN
$("#img1").animate({left:'+=470'},1000);
$("#img1").animate("pause");
$("#img1").animate("pause");
$("#img1").animate("pause");
$("#img1").animate({left:'+=470'},1000);

//FADE OUT RED FADE INTO COLOR PHOTO
$("#img1").fadeOut("fast", function(){
    $("#img0").fadeOut(2000, function(){
        $("#img3").fadeOut(3000, function(){
            $("#img4").fadeOut(2000, function(){
                $("#img5").fadeOut(3000);
                });
            });
        });
//END OF FADE QUEUE
});

//END DOC READY BRACKET
});

HTML

    <div id="img1"><img src="images/slide_double.jpg" alt="" /></div>
    <div id="img0"><img src="images/slide_0.jpg" alt="" /></div>
    <div id="img3"><img src="images/slide_3.jpg" alt="" /></div>
    <div id="img4"><img src="images/slide_4.jpg" alt="" /></div>
    <div id="img5"><img src="images/slide_5.jpg" alt="" /></div>
    <div id="img6"><img src="images/slide_6.jpg" alt="" /></div>

CSS

#slideshow {
background-image:url('images/slide_0.jpg');
height: 270px;
width: 460px;
overflow: hidden;
position: relative;
}

#img1 {
height: 270px;
width: 460px;
position: relative;
left: -940px;
} 

#img0 {
height: 270px;
width: 460px;
position: absolute;
z-index: 6;
}   

#img3 {
height: 270px;
width: 460px;
position: absolute;
z-index: 5
}

#img3 {
    height: 270px;
width: 460px;
position: absolute;
z-index: 4
}

#img4 {
height: 270px;
width: 460px;
position: absolute;
z-index: 3
}

#img5 {
height: 270px;
width: 460px;
position: absolute;
z-index: 2
}

#img6 {
height: 270px;
width: 460px;
position: absolute;
z-index: 1
}
4

1 に答える 1

1

JQuery 関数pauseを使用するオプションはありませんanimate

一時停止をシミュレートするには、.delay()JQuery 関数を使用できます。

更新しました

http://jsfiddle.net/UQTY2/2/

 $(document).ready(function () {
     $("#img1").animate({
         left: '+=470px' //ACC LOGO COMES IN 
     }, 1000).delay(1500).animate({
         left: '+=470'   //AVERY LOGO COMES IN
     }, 1000).delay(1500).animate({
         left: '+=470'
     }, 1000);
 });
于 2013-01-29T18:53:52.777 に答える