jQuery .animate 宽度在 IE7/IE8 中不起作用答案

【问题标题】：jQuery .animate width not working in IE7/IE8jQuery .animate 宽度在 IE7/IE8 中不起作用
【发布时间】：2012-11-15 16:23:28
【问题描述】：

我正在开发一个带有弹出式计算器的网站。单击“报价计算器”按钮时，一个 div 动画，首先是高度，然后是宽度，并位于页面上所有其他元素的顶部。这适用于 IE9、Chrome、FireFox 和 Safari，不幸的是它拒绝在 IE7/IE8 中运行。

当单击“报价计算器”时，它只会对高度进行动画处理，然后停止 - 在页面上留下一条粗蓝线，它不会对宽度进行动画处理。

我在这里和谷歌上搜索过类似的问题，但无济于事。问题是什么？

这是我的代码：

$("#calcbutton").click(function () {
    $("#pnecontainer").show();
    $("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px"});
    $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

有没有办法让它在 IE7/IE8 上运行，还是我必须满足于一些不太美观的东西，比如消失/重新出现的盒子？

更新：

我已经在一行上实现了所有动画/作为同一功能的一部分。

有趣的是，出于某种原因，虽然它不允许我在第一次点击时在同一个函数中实现 2 个动画，但它确实允许我在最小化函数上这样做：

$("#minimizebutton").click(function () {
    $("#pnecontainer").animate({width: "-925px"});
    $("#pnecontainer").animate({height: "-550px", top: "-635px"});
    $("#pnecontainer").hide(100);
});

奇怪.. 有什么想法吗？（仅限cmets，已采纳）

【问题讨论】：

标签： jquery internet-explorer-8 internet-explorer-7 jquery-animate

【解决方案1】：

您想使用回调函数，等待为宽度设置动画直到其他动画完成，或者可能只是将所有动画放在同一个.animate()

IE7/8 不适合 JS，更不用说动画了，因此同一项目上的 2 个动画同时运行可能是导致问题的原因。

$("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px"}
    , function () {
         $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

或者在 1 行中全部设置动画

$("#pnecontainer").animate({height: "550px", position: "absolute", top: "75px", 
                            width: "925px", left: "-635px"});

【讨论】：

谢谢你，在一条线上制作动画，它看起来仍然有 70% 好，所以我对这个修复很满意，另外两个回答的关于“位置”属性也是正确的，如果我将动画全部实现在一行with '位置'，什么都不会发生。因此，为所有人投票并接受这个答案。 :)

【解决方案2】：

IE7 无法识别 jquery .animate() 中的属性 'position'。

试试这个：

CSS

#pnecontainer { position: absolute; }

$("#calcbutton").click(function () {
    $("#pnecontainer").show();
    $("#pnecontainer").animate({height: "550px", top: "75px"});
    $("#pnecontainer").animate({width: "925px", left: "-635px"});
});

【讨论】：

【解决方案3】：

IE7 浏览器内部无法识别属性“位置”，您不能同时运行 2 个动画

【讨论】：