Question

我想向我们的几位设计师展示jQuery中动画的快速模型，特别是可以创建一个物体在另一个物体下移动的外观。

我设置的示例有一张100美元的钞票，在一张透明的.png纸张下面移开了一个洞。两个元素都设置为绝对定位，而纸张.png具有更高的z-index。

一切似乎都运转良好，但我注意到Chrome和Safari放大或缩小定位。

我在这里发布了这个例子：

http://tdm-analytics.com/js/examples/example-1.html

您会注意到，如果放大或缩小并刷新，垂直定位将关闭。

代码在这里：

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://tdm-analytics.com/js/examples/jquery-1.4.4.js"></script>
    <script>
        $(document).ready(function() {
            $("#100").animate({"top":"-=610px"}, 3000);
        });
    </script>
</head>
<body>
    <div id="envelope" style="position:absolute;margin-right:-195px;right:50%;top:200px;z-index:9999;">
        <img src="http://tdm-analytics.com/js/examples/bkhtornframe.png" />
    </div>
    <div id="100" style="position:absolute;margin-right:-190px;right:50%;top:630px;z-index:1;">
        <img src="http://tdm-analytics.com/js/examples/100-dollar-bill.jpg" />
    </div>
</body>
</html>

不确定这是我做错了还是jQuery问题。如果有人知道修复，我会非常感谢你的帮助。

Answer 1

使用边距（例如margin_left）水平设置动画，这在放大chrome / safari [和其他]时有效。

Answer 2

我可以看到chrome中的动画没有问题。没有尝试过Safari，因为它和Chrome一样是Web工具包。

或者您是指在放大时参考certail屏幕分辨率上显示的浏览器滚动条？

当用户放大或缩小时，jQuery动画在Chrome / Safari上行为异常

2 个答案: