0

这是一个 jQuery 动画问题，我正在为我的 DOM 树中的元素实现滑动效果。

在我的代码的某处，我有一个父 div 充当滑动选项卡，其中嵌套了其他 div。当在按钮上检测到鼠标单击时，父 div 及其内容会滑入屏幕视图，或滑出屏幕。

为简单起见，这里有一些片段。有问题的 div 的 HTML 如下所示：

<div id="parentTab" class="tabby">
    <!-- nested here are other divs -->
    <div id="child1"> </div>
</div>

动画代码的javascript：

$('#parentTab').animate(
{'left':'-=' +
      ($('#parentTab').width())}, 'slow',
            function() {
                // do something after tab comes into view
            });

在我的代码中，我只在父 div 上调用 jquery 的 animate()。该代码在 Firefox 上按预期工作。所有嵌套的 div 与父 div 一起向左/向右滑动。但是对于基于 webkit 的浏览器（例如 Safari 或 Chrome），我遇到了一个问题，即父 div 动画正确，但嵌套 div 在视觉上定位不正确，并且似乎停止在它们应该定位的位置。有趣的是，当我使用 Developer 工具检查 HTML 元素时，嵌套的 div 会捕捉到父 div 中的正确位置。所以从这个角度来看，浏览器似乎认为元素的位置正确，但从视觉上看，元素的位置并不正确。

有人遇到过类似的问题吗？

4

1 回答 1

0

我建议您使用变量来设置动画值，并且不要忘记添加'px'Internet Explorer 错误修复。

var targetWidth = $('#parentTab').width();

$('#parentTab').animate({'left':'-=' +targetWidth+ 'px'}, 'slow', function() {
      // do something after tab comes into view
});
于 2013-01-25T15:23:55.027 回答