jQueryのアニメーションは、オーバーシュート

Question

は

例：あなたは、右上のタブの一つの上にマウス、タブがさらに意図したより出て移動http://wispinternet.com/glencoe/ページが最初にロードされ

、最初の時間は、その後、目的の位置に戻り。その後、意図どおりに動作します。

これは何が原因なのかよく分かりません。私はイージングスタイルをリニアに変更しようとしましたが効果はありません。私はJQueryのエキスパートではありませんが、私のCSSには問題があると思います。

ソースがHTMLインラインで表示されている場合は、Dreamweaverのバグと思われます。

Answer 1

li：margin: 70px 0px 0px;にこのCSSを追加する必要があります。 また、Firefoxでは、画像の青い太い境界線があります。あなたはそれらをCSSにしてください。

編集良い答え：これまで

変更あなたのjqueryの：このように動作するように思わ何らかの理由

$("#nav li").mouseover(function(){ 
    $(this).stop().animate({marginTop:50},{duration:500}) 
}); 

$("#nav li").mouseout(function(){ 
    $(this).stop().animate({marginTop:70},{duration:500}) 
}); 

。

Answer 2

li要素に:hover疑似クラスがあります。負のtopプロパティを削除します。

Answer 3

各li要素にstyle = "margin：70px 0px 0px 0px"を設定すると効果があります。あなたの最初のマウスオーバー時には余白プロパティがインラインで表示されないので、jqueryは0px 0px 0px 0pxを割り当てます。なぜならジャンプが表示されるからです。

<li style="margin:70px 0px 0px 0px"><a href="home.php"><img src="images/home_tab.png" alt="Home" width="65" height="200" /></a></li> 
<li style="margin:70px 0px 0px 0px"><a href="gallery.php"><img src="images/gallery_tab.png" alt="Gallery" width="65" height="200" /></a></li> 
<li style="margin:70px 0px 0px 0px"><a href="booking.php"><img src="images/booking_tab.png" alt="Booking" width="65" height="200" /></a></li> 
<li style="margin:70px 0px 0px 0px"><a href="contact.php"><img src="images/contact_tab.png" alt="Contact" width="65" height="200" /></a></li> 

margin-top：70pxを使用して、その特定のプロパティをアニメーションすることもできます。