Chrome中的.animate（）问题（适用于Firefox和IE）

我只是试图滑动主容器（以及其中的所有内容），以便在单击导航按钮时显示导航菜单。当您再次单击它时，容器div会移回导航菜单的顶部。这是在移动设计上受欢迎的UI。Chrome中的.animate（）问题（适用于Firefox和IE）

无论如何，我已经在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'}); 
    }); 
});

所以，问题是，“导航”和“容器”的div都没有动起来。

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

来源

2012-11-01 jstacks

更新::

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

#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-01 02:37:39

我想在容器中的嵌套的切换，因为我希望他们能够与容器移动。在这个例子中，顶部的酒吧保持静止。我希望它随容器一起移动。这适用于Firefox。在Chrome中，“nav”div保持不变，就像你的例子。然后，当你去隐藏时，容器移回，“nav”div实际上使移动结束。所以他们彼此来回移动，而不是在一起。 – jstacks

啊，好的。 @jstacks查看我的更新回答 –

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

Chrome中的.animate（）问题（适用于Firefox和IE）

回答

相关问题