【问题标题】:jQuery .animate({left}) not working in IEjQuery .animate({left}) 在 IE 中不起作用
【发布时间】:2013-01-29 17:45:25
【问题描述】:

我使用.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
}

【问题讨论】:

  • .animate("pause")!?此外,当涉及到 IE 时,您需要更具体地了解它是哪个版本
  • 老实说,我是 jQuery 新手...使用 .animate("pause") 有什么问题吗?另外,我使用的是 IE 8
  • 据我所知,这不是库存 jQuery
  • 你可以使用 .delay() 函数代替 .animate("pause")
  • @sdespont - 将其发布为答案

标签: jquery internet-explorer


【解决方案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);
 });

【讨论】:

  • 我将函数更改为.delay(1500)(谢谢!)但它在除 IE 之外的所有应用中都运行良好
  • 在我将它从 .animate("pause") 更改为 .delay 后,它似乎最终成为语法错误,因为这对我来说现在在 IE 中有效:$(document).ready(function (){ //ACC LOGO 进来 $("#img1").animate({ left: '+=470px' }, 1000).delay(1500); //AVERY LOGO 进来 $("#img1") .animate({ left: '+=470' }, 1000).delay(1500); $("#img1").animate({ left: '+=470' }, 1000);
  • 我已经用 IE 中经过测试的小提琴更新了我的答案。您还可以使用 JQuery 链接而不是每次都声明您的图像
猜你喜欢
  • 2012-10-07
  • 1970-01-01
  • 2011-11-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-19
  • 2014-07-02
相关资源
最近更新 更多