JQuery アニメーションを使用して、スライド メニュー項目エフェクトの実装手順と code_jquery を作成する

効果:

2 番目のメニュー項目をクリックすると、上向きにスライドするアニメーションが表示され、マージントップの下部にある別の div のテキストを制御します

上に移動して、元のテキストを置き換えます。

原理は実際には難しくなく、CSS コントロールと jQuery コードを追加するだけです

ドキュメント内のすべての li にホバー イベントをバインドします。イベントはマウスのステータス (出入りする以外の何ものでもありません) に基づいています。

アニメーション アニメーション メソッドを使用して、元の div を上に 70 ピクセル移動し、移動したときにページ効果を元の外観に戻します。

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

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

$(function () {
var webNav = {
val: {
target: 0
},

init: function () {
$(".gnb ul li").on ("hover", webNav.hover);

},

hover: function (e) {
if ($(this).index() == webNav.val.target) { return };
if (e.type == "mouseenter") {
$(this).find("a>p").stop(true, true) .animate({ "margin -top": "-70px" }, 300);
} else if (e.type == "mouseleave") {
$(this).find("a>p ").stop(true , true).animate({ "margin-top": "0px" }, 300);
}
}
};
webNav.init();


});