效果:
點選第二個選單項後出現一個向上滑動的動畫,控制margin-top底部另一個div中的文字
上移從而替換掉原有的文字。
原理其實不難無非就是css的.控制加之jquery的程式碼
對docemnt中所有li繫結一個hover事件,事件中根據滑鼠的狀態(無非是移入與移除),
使用animate的動畫方式使原有的div向上移70px,移出時再將頁面效果變回原有的樣子。
程式碼如下:
複製程式碼 程式碼如下:
$(function () {
var webNav = {
val: {
target: 0
},
init: function () {
$(" ul li")("hover", r);
},
hover: function (e) {
if ($(this)x() == et) { return };
if ( == "mouseenter") {
$(this)("a>p")(true, true)ate({ "margin-top": "-70px" }, 300);
} else if ( == "mouseleave") {
$(this)("a>p")(true, true)ate({ "margin-top": "0px" }, 300);
}
}
};
();
});