亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用JQuery動畫制作滑動菜單項效果實現(xiàn)步驟及代碼

 更新時間：2013年02月07日 09:07:35   作者：  
滑動菜單項效果,聽起來就是很時尚的一個效果，不過實現(xiàn)起來有些麻煩，還好有本文的出現(xiàn)，可以幫助你解決這個困惑，熱愛特效的你可不要錯過了哈，好了話不多說切入正文

效果：



點擊第二個菜單項后出現(xiàn)一個向上滑動的動畫，控制margin-top底部另一個div中的文字

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



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

對docemnt中所有l(wèi)i綁定一個hover事件，事件中根據(jù)鼠標的狀態(tài)（無非是移入與移除），

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

代碼如下：

復(fù)制代碼 代碼如下:

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


});

相關(guān)文章

最新評論