1

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

奇怪..想法有人吗？（仅限评论，已采纳）

4

3 回答 3

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"});
于 2012-11-15T16:26:12.553 回答
1

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

试试这个 ：

CSS

#pnecontainer { position: absolute; }

JS

$("#calcbutton").click(function () {
    $("#pnecontainer").show();
    $("#pnecontainer").animate({height: "550px", top: "75px"});
    $("#pnecontainer").animate({width: "925px", left: "-635px"});
});
于 2012-11-15T16:27:57.390 回答
1

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

于 2012-11-15T16:35:07.167 回答