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）

回答

相關問題