2

考虑 Firefox 中的以下小提琴：http: //jsfiddle.net/rawKC/1/

单击红色矩形，看看它是如何移动的。它立即消失，然后在顶部某处不知从何处发出颤音，并在其适当的终点停止。预期的行为（例如在 Chrome 中可以看到）是以直线游荡到终点，改变动画调用中指定的大小。

矩形使用 left、right、top 和 bottom 属性进行绝对定位。这也是它的大小是如何确定的。单击后，包装器的定位属性将更改。我不知道为什么动画在 Firefox 中不起作用。

我可以想到许多解决方法，但我想找出这个特定用例有什么问题。有人有想法吗？

编辑

似乎包含元素的样式根本不重要。只有移动的元素表现得很奇怪。我已经更新了问题并相应地摆弄了。

代码片段供参考：

<div id="wrapper"></div>

$(function() {
    var $wrapper = $('#wrapper');

    $wrapper.click(function() {
        $wrapper.animate({
            bottom: '85%',
            left: '2%',
            right: '75%',
            top: '2%'
        });
    });
});

#wrapper {
    bottom: 35%;
    left: 18%;
    position: absolute;
    right: 18%;
    top: 35%;
}
4

0 回答 0