利用JQuery动画实现滑动菜单项效果的步骤及代码
- 网页设计
- 关注:2.13W次
效果:
点击第二个菜单项后出现一个向上滑动的动画,控制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);
}
}
};
();
});
- 文章版权属于文章作者所有,转载请注明 https://xuezhezhai.com/sjzz/sjzz/qv6ez2.html