Question

我正在开发一个有弹出计算器的网站。单击“引用计算器”按钮时，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);
});

奇怪......想什么？（仅请评论，答案已被接受）

Answer 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"});

Answer 2

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

试试这个：

<强> CSS

#pnecontainer { position: absolute; }

<强> JS

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

Answer 3

IE7浏览器无法在内部识别属性“位置”，并且您无法在同一时间运行2个动画

jQuery .animate width在IE7 / IE8中不起作用

3 个答案: