JQuery 애니메이션을 사용하여 슬라이딩 메뉴 항목 효과 구현 단계 및 code_jquery 만들기

효과:

두 번째 메뉴 항목을 클릭하면 위쪽으로 슬라이딩하는 애니메이션이 나타나 여백 상단 하단에 있는 다른 div의 텍스트를 제어합니다.

원본 텍스트를 바꾸려면 위로 이동하세요.

원리는 사실 어렵지 않습니다. CSS 제어와 jquery 코드에 지나지 않습니다

docmnt의 모든 li에 hover 이벤트를 바인딩합니다. 이 이벤트는 마우스 상태를 기반으로 합니다(안팎으로 이동하는 것 이상은 아님).

애니메이션 애니메이션 방법을 사용하여 원본 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();


});