- 相關(guān)推薦
利用JQuery動(dòng)畫實(shí)現(xiàn)滑動(dòng)菜單項(xiàng)效果的步驟及代碼
效果：
點(diǎn)擊第二個(gè)菜單項(xiàng)后出現(xiàn)一個(gè)向上滑動(dòng)的動(dòng)畫，控制margin-top底部另一個(gè)div中的文字
上移從而替換掉原有的文字。
原理其實(shí)不難無(wú)非就是css的控制加之jquery的代碼
對(duì)docemnt中所有l(wèi)i綁定一個(gè)hover事件，事件中根據(jù)鼠標(biāo)的狀態(tài)（無(wú)非是移入與移除），
使用animate的動(dòng)畫方式使原有的div向上移70px，移出時(shí)再將頁(yè)面效果變回原有的樣子。
代碼如下：
復(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();
});
【利用JQuery動(dòng)畫實(shí)現(xiàn)滑動(dòng)菜單項(xiàng)效果的步驟及代碼】相關(guān)文章：
動(dòng)畫效果設(shè)計(jì)12條原則09-27
數(shù)控編程代碼大全02-13
Java代碼的基本知識(shí)09-03
網(wǎng)頁(yè)滾動(dòng)文字的制作HTML代碼04-10
臨摹的方法與步驟03-20
細(xì)致的泡茶步驟04-19
績(jī)效管理的步驟06-09
國(guó)產(chǎn)動(dòng)畫的現(xiàn)狀與前景05-09
建筑動(dòng)畫的制作流程09-05
項(xiàng)目問題管理的步驟04-09