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

没有pause使用animateJQuery 函数的选项

要模拟暂停，可以使用.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 回答