利用JQuery動畫製作滑動選單項效果實現步驟及程式碼

利用JQuery動畫製作滑動選單項效果實現步驟及程式碼

效果:

點選第二個選單項後出現一個向上滑動的動畫,控制margin-top底部另一個div中的文字

上移從而替換掉原有的文字。

原理其實不難無非就是css的控制加之jquery的程式碼

對docemnt中所有li繫結一個hover事件,事件中根據滑鼠的狀態(無非是移入與移除),

使用animate的動畫方式使原有的div向上移70px,移出時再將頁面效果變回原有的樣子。

程式碼如下:
複製程式碼 程式碼如下:
$(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();

});

您可能感興趣的文章:

jQuery實現可用於部落格的動態滑動選單完整例項jquery實現仿Flash的橫向滑動選單效果程式碼jquery實現最簡單的滑動選單效果程式碼jQuery實現帶延遲效果的滑動選單程式碼jquery實現左右滑動選單效果程式碼jQuery實現可用於部落格的動態滑動選單jQuery實現背景滑動選單