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

Question

当您单击导航按钮时，我只是试图将主容器（以及其中的所有内容）滑开以在下方显示导航菜单。当您再次单击它时，容器 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 没有一起移动。

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

Answer 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>