jQuery_jquery を使用してメニューに応じたマウス スライド アニメーション効果を実装する方法

この記事の例では、jQuery がメニュー依存のマウス スライド アニメーション効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このコードのテスト環境は IE9 および GG および FF ブラウザです。IE8 以下のブラウザはサポートしていない可能性がありますのでご了承ください。

この JS マウス スライド エフェクトは、jQuery を使用して簡単なアニメーションを実現しています。jQuery の方が優れた記述方法を備えていることに驚きました。このメソッドは、animate メソッドの前に stop メソッドを追加することで、マウスの後にそれを実現できます。は移動されます、いいえ 次に、スライディング効果を実行します。

コードをコピー コードは次のとおりです:

<頭>



<スタイル>
body{font-size:12px;font-family:Tahoma、Arial、Verdana;color:#000; width:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,i{padding: 0;マージン:0}
フィールドセット、img {border:0}
.clear{ clear:both;}
address,caption,cite,code,dfn,em,th,var {font-weight:normal;font-style:normal}
ol,ul {リストスタイル:なし}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-size:100%}
abbr,頭字語,img {border:0}
ボタン、入力、選択、テキストエリア{font-size:100%;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
テーブル {border-collapse:collapse;border-spacing:0;}
a{テキスト装飾:なし;}
a:hover {テキスト装飾:下線;}
.clearfix:after {可視性: 非表示;表示: ブロック;フォント サイズ: 0;コンテンツ: ".";クリア:両方;}
.all ul{ width:100%; }
.all ul li{ width:100%; height:40px; border-bottom:1px; カーソル:ポインター;}

• 最初のアイテム


• 2 番目のアイテム


• 3 番目の項目

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$('.all ul li').mouseover(function(){
$(this).animate({"height":"70px","line-height":"70px"},100)
}).mouseleave(function(){
$(this).stop().animate({"height":"40px","line-height":"40px"},100)
});
})

この記事が皆さんの jQuery プログラミングに役立つことを願っています。