Question

我使用.animate()制作了一个快速jQuery片段，它在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
}

Answer 1

没有pause选项与animate JQuery函数

一起使用

要模拟暂停，可以使用.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);
 });

jQuery .animate（{left}）在IE中不起作用

1 个答案: