Use JQuery animation to create sliding menu item effect implementation steps and code_jquery

Effect:

After clicking the second menu item, an upward sliding animation appears, controlling the text in another div at the bottom of the margin-top

Move up to replace the original text.

The principle is actually not difficult, it’s nothing more than css control plus jquery code

Bind a hover event to all li in docmnt. The event is based on the status of the mouse (nothing more than moving in and out),

Use the animate animation method to move the original div upwards by 70px, and then change the page effect back to its original appearance when it is moved out.

The code is as follows:

Copy codeThe code is as follows:

$(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();


});