利用JQuery动画制作滑动菜单项效果实现步骤及代码
更新时间：2013年02月07日 09:07:35 作者：
滑动菜单项效果,听起来就是很时尚的一个效果，不过实现起来有些麻烦，还好有本文的出现，可以帮助你解决这个困惑，热爱特效的你可不要错过了哈，好了话不多说切入正文
效果：
点击第二个菜单项后出现一个向上滑动的动画，控制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();
});
相关文章
在一些图片比较多的网站上会出现访问时图片不存在的情况：默认显示出来的样子很不雅观,可以解决图片不存在时，使用其他的图片替换吗，答案是可以的；感兴趣的朋友可以了解下，或许本文可以帮助到你2013-02-02
alertifyjs是一个非侵入式，可定制的JavaScript通知组件。包括可定制的对话框，和右下角消息弹出框。完全可定制的警报，确认和提示对话框、完全自定义的通知系统、回调参数处理包括“确定“和”取消“按钮的点击、允许对话框排队2015-04-04
随着Jquery1.4的发布，Jquery运用越来越多了，让我们来实现以前经常用到的DropDownList无刷新联动。2010-03-03
本文主要分享了jquery实现百叶窗效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。我的理解就是将元素移除了。2015-08-08
这篇文章主要介绍了jqGrid 学习笔记整理——进阶篇(一 )的相关资料,需要的朋友可以参考下2016-04-04
自己动手实现jQuery Callbacks完整功能代码详解
最近大量的用到jQuery Callbacks 对象，jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现，下面我们也模拟实现jQuery Callbacks 对象的部分功能2013-11-11
jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。2015-11-11
这篇文章主要为大家详细介绍了jquery插件实现仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家详细介绍了jquery ztree实现树的搜索功能，zTree是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的Tree插件，对ztree感兴趣的小伙伴们可以参考一下2016-02-02
最新评论