div元素在jQuery動畫中跳躍幾個像素的問題

我正在使用JQuery的最新版本並嘗試在屏幕左側爲div創建動畫效果。這只是很好，除了在實際動畫之前它明顯跳躍起來。我已經在jsFiddle中設置了它http://jsfiddle.net/ns6string/agY2z/ 一定要點擊'portfolio'或'about'來查看我正在處理的內容。div元素在jQuery動畫中跳躍幾個像素的問題

你可以看到我已經設置了代碼（我試圖把它清理乾淨），但這裏要再次重申，萬一有人不覺得自己打的跳躍;）

HTML：

<body> 
     <div id="header"> 
     HOME 
     </div> 
     <div id="menu"> 
      <div id="portfolio"> 
       <h3 class="menuitem" >Portfolio</h3> 
      </div> 
      <div id="about"> 
       <h3 id="about" class="menuitem">About</h3> 
      </div> 
     </div> 
</body>

CSS：

body{ right: 0px; left: 0px; bottom: 0px; top: 0px; position: fixed; color: #444444; margin: 0px; background-color: #c7c7c7; font-size: 12px; font-family: Arial, Helvetica, sans-serif;} 
#menu{ text-shadow: 1px 1px 3px white; position: fixed; margin-top:220px; width: 200px; margin-right: auto; margin-left: auto; right: auto; left: 47.5%; } 
.menuitem{ display: inline-block; text-align: left; }

JS：

$(document).ready(function() { 
    //Hovering stuff went here, shouldn't be relevant 


    $(".menuitem").click(function() { 
     $("#menu").animate({ 
      'top': '10%', 
      'left': '7%' 
     }, { 
      duration: 500, 
      queue: false 
     }, function() {}) 
    }); 
});

來源

2011-06-06 jakev

首先：非常奇怪的問題。

所有你需要做的是在#menu上指定一個top: 5%的css值（如果5％不是你想要的，應該罰款任何值）。這會在你點擊它時停止「搖動」。

在旁註中，我注意到您指定的值爲right和left。我建議刪除right值。

來源

2011-06-06 01:26:32

看起來像初始化頂部是關鍵。而正確的價值是我忘了刪除的其他東西剩下的剩餘價值。謝謝！ – jakev 2011-06-06 01:31:51

div元素在jQuery動畫中跳躍幾個像素的問題

回答

相關問題