jquery的animate动画能不能在IE中执行

Posted 2023-03-17

$("abc").animate( ......... , 1000 ); 类似上面的这种jquery的animate的动画效果，能不能在ie中被执行（默认情况，不安装其他的）。

能！！但是你的选择器不对，没有abc这个标签，如果是ID的话前面加个#，如果是class的话就加一点 参考技术A 1.自己设置变量，开始和结束设为2中不同的值
2.用jquery的 :animated 选择 1：功能说明
　　兼容主流浏览器。
1：支持回调函数；
　 2：支持级联动画调用；
3：支持delay动画队列延迟；
　 4：支持stop停止动画；
5：支持opacity透明度变化；
6：支持+= -= *= /=操作；
7：支持单位操作(px, %);
2：使用说明
jelle(A).animate(B, C, D);
A:需要执行动画的dom元素ID；
B:动画的主要参数传递key,val,key2,val2;比如width:'100px',height:'+=100px',opacity:0.5,
opacity--透明度变化 支持+= -= *= /=操作。
C:动画执行用时，以毫秒为单位；[可选 默认500毫秒];
D:回调函数;[可选]
3:方法说明
1:animate()方法
jelle('cc').animate(width:'100px',300,function()alert('完成'));// 是 cc 的宽度在300毫秒的时间变化到100px 动画结束 弹出 ‘完成'
2:stop()方法
jelle('cc').stop();//停止正在 cc 对象上播放的动画。
3：delay（）方法
jelle('cc').delay(1000).animate(width:'100px');//cc 的宽度发生变化 将被延迟1秒执行。
我会一直把他完善下去。 参考技术B 可以！
jquery 已经解决了各个浏览器的差异！绝大部分效果都是浏览器兼容的

jQuery .animate() marginLeft 在 IE8 及更低版本中不起作用 - 参数无效

【中文标题】jQuery .animate() marginLeft 在 IE8 及更低版本中不起作用 - 参数无效

【英文标题】：jQuery .animate() marginLeft not working in IE8 and below - invalid argument

【发布时间】：2012-05-19 12:19:19

【问题描述】：

我有一个 IE 特定的问题。从好的方面来说，它适用于所有其他浏览器。

点击应该执行简单动画功能的.close_button_page图像时会出现问题，将div向左移动。

在 IE 8 及更低版本中，它只是在控制台中显示 invalid argument。我在网上发现了类似的问题，但没有解决问题。

注意：目前还有许多其他 IE 错误（z-index 等），因此请忽略。

HTML：

<div id="content-left">
    <img class="close_button_page"   src="assets/images/close_button.png"/>
    <h2>Our process</h2>
    <h3>Even smaller title to this section</h3>
    <p>Dummy text to show that this is the home of Dukelease and that this site is of the utmost quality and will provide hours of fun by flicking through images.</p>
</div>

CSS：

#content-left 
  -webkit-box-shadow:#000000 1px 1px 5px;
  border-top-color:#FFFFFF;
  border-top-style:solid;
  border-top-width:3px;
  box-shadow:#000000 1px 1px 5px;
  float:left;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  position:relative !important;
  width:230px;
  z-index:10;

style.css (line 562)
#content-left, .bg_white 
  background-color:rgba(255, 255, 255, 0.949219);

JavaScript：

$(".close_button_page").click(function()   

    $('#content-left').animate(
        marginLeft: '-260px'
    , 1300, function()
        $('.open_button_page').fadeIn(1000);
    );             
);

【问题讨论】：

首先，尝试删除 "margetLeft" 周围的引号或将其更改为 "margin-left"

要尝试的另一件事是将 -260 更改为“-260px”

之前试过没有成功

【参考方案1】：

尝试替换这个：

$(".close_button_page").click(function()   

    $('#content-left').animate(
        marginLeft: '-260px'
    , 1300, function()
        $('.open_button_page').fadeIn(1000);
    );             
);

用这个：

$(".close_button_page").click(function() 
    $('#content-left').toggle('slide');
);

在这里测试http://jsfiddle.net/ollie101/RuVZ3/5/

【讨论】：

这非常有效。这不是 animate() 但显然有问题，所以只需使用 toggle()！