0

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

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

4

1 回答 1

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>
于 2012-11-01T02:37:39.910 回答