Question

我只是试图滑动主容器（以及其中的所有内容），以便在单击导航按钮时显示导航菜单。再次单击它时，容器div将向后移动到导航菜单的顶部。它的UI在移动设计中很受欢迎。

无论如何，我在Firefox和IE中运行得很好。不幸的是，对于Chrome来说也是如此。

$(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'});
    });
});

所以，问题是“nav”和“容器”div不会一起移动。

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

Answer 1

更新::

您在导航上有固定的排名规则。如果将其更改为绝对，则动画将正常运行：

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

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

1 个答案: