Chrome 中 .animate() 的问题（在 Firefox 和 IE 中很好）

Posted 2023-05-08

【中文标题】Chrome 中 .animate() 的问题（在 Firefox 和 IE 中很好）

【英文标题】：Issues with .animate() in Chrome (fine in Firefox and IE)

【发布时间】：2012-10-21 15:05:13

【问题描述】：

当您单击导航按钮时，我只是试图将主容器（以及其中的所有内容）滑开以在下方显示导航菜单。当您再次单击它时，容器 div 将移回导航菜单上方。它是在移动设计中流行的 UI。

无论如何，我在 Firefox 和 IE 中都能正常工作。不幸的是，Chrome 不能这样说。

http://jsfiddle.net/aXsWz/28/

$(document).ready(function() 

$('div#navNavigate').click(function()
        $('div#navNavigateHide').show()
        $('div#navNavigate').hide()
        $('div#container').animate('left':'+=120');
);  

$('div#navNavigateHide').click(function()
        $('div#navNavigate').show()
        $('div#navNavigateHide').hide()
        $('div#container').animate('left':'-=120');
    );
);  

所以，问题在于“导航”和“容器”div 没有一起移动。

任何帮助表示赞赏。谢谢。

【参考方案1】：

更新::

您在导航上有一个固定的位置规则。如果改成absolute，动画会正常运行：

#nav 
  background:#222222;
  width:240px;
  height:45px;
  margin:0 auto;
  position:absolute;  <-- This was previously "fixed"
  top:0;
  z-index:10000;

工作示例：http://jsfiddle.net/aXsWz/30/

看看这篇文章，看看固定定位和绝对定位的区别：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

---

问题是您将切换器嵌套在移动的容器内。如果您将它们重构为位于该容器之外，它就可以正常工作（尽管您可以对这个 js 模式进行很多改进......）。

工作示例：http://jsfiddle.net/aXsWz/29/

<div id='nav'>
    <div id='navNavigate'>
    </div>
    <div id='navNavigateHide'>
    </div>
</div>    

<div id='container'></div>

【讨论】：

我想要容器中的嵌套切换，因为我希望它们与容器一起移动。在该示例中，顶部的栏保持静止。我希望它与容​​器一起移动。这适用于 Firefox。但是，在 Chrome 中，“nav” div 像您的示例一样保持静止。然后，当您隐藏时，容器会向后移动，“导航”div 实际上会移动。所以它们彼此相对地来回移动，而不是一起移动。

虽然这解决了我的一个问题（和小提琴），但我的实际代码在 Chrome 中仍然有些奇怪。我似乎无法复制这个问题，但让我试着解释一下：所以容器 div，而不是仅仅从它的当前位置移动。它向左跳（因此很大一部分不在屏幕上），然后向右移动所需的距离。问题是跳跃。不知道为什么它会在动画之前改变位置，但这就是问题所在。 “导航”和“容器”现在确实一起移动，所以至少这是固定的（谢谢！）。不知道如何，但我也设法解决了 IE 问题。

我已经编辑了我的主要帖子以复制新问题。 Fiddle 实际上可以工作，但是，正如我所提到的，这个问题仍然存在于我的实际代码中（现在尝试在 Fiddle 中复制）。

我并不是要粗鲁，但您真的应该接受我的回答，然后针对您无法复制的问题提出一个新问题... :) 我很乐意接受一旦您可以复制问题或提供链接以查看实际问题，请查看新问题中的下一个问题。

会的。一点都不粗鲁。我同意你的观点......或多或少地恢复了主要帖子以反映我最初的问题，因此它对其他人也更有用。