Question

这是一个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中的正确位置。所以从这个角度来看，浏览器似乎认为元素处于正确的位置，但在视觉上，元素没有正确定位。

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

Answer 1

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

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

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

jQuery animate嵌套div：gecko和webkit差异

1 个答案: