利用JQuery动画制作滑动菜单项效果实现步骤及代码
2019/6/29 22:46:26
本文主要是介绍利用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动画制作滑动菜单项效果实现步骤及代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习