jquery插件之easing 动态菜单

很简单的一个效果插件,但不是经常用,怕忘了,以后在用又要去看文档,所以现在把笔记写下来,方便以后

代码如下:

<script>
$(function(){
$.easing.def="easeInQuad";//设置默认效果
var callback=function (){
alert("ok");
}
$("#t1").animate({
"top":600
},{duration: 3000,
easing:"easeInQuad",//可省略
complete: callback})
})
</script>

使用了easing后,JQ原来的方法有将不可用,用对象代替JQ中时间,该对象如下例
{duration: 3000,easing:"easeInQuad",complete: callback}
原JQ的回调函数由complete代替
如果不使用easing,即时间参数不为上面对象所代替,保留原有功能
即加载EASING后仍可以如下使用


代码如下:

<script>
var callback=function (){
alert("ok");
}
$("#t1").hide(3000,callback)
</script>

效果页:http://gsgd.co.uk/sandbox/jquery/easing/
具体参数细节:
duration 选项:
毫秒数
complete 选项:
完成后调用
easing 选项:
jswing
def
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

赞 (0)

相关推荐

  • jquery实现可横向和竖向展开的动态下滑菜单效果

    jquery实现可横向和竖向展开的动态下滑菜单效果

    本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果.分享给大家供大家参考.具体如下: 这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉菜单,还有纵向垂直布局向右滑出的导航菜单,根据你的需要选择使用. 运行效果截图如下: 在线演示地址如下: http://

  • jQuery实现的动态伸缩导航菜单实例

    本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">&l

  • jquery实现动态菜单的实例代码

    jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式. 其具体步骤可以分为以下几步: •创建一个含有要表达的菜单的html页面 复制代码 代码如下: <html>  <head>    <title>jquery示例2:jquery菜单</title>    <meta http-equiv="Content-Type" content="text/html; ch

  • jQuery实现可用于博客的动态滑动菜单

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015

  • jQuery实现的背景动态变化导航菜单效果

    jQuery实现的背景动态变化导航菜单效果

    本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

  • jQuery 打造动态下滑菜单实现说明

    jQuery 打造动态下滑菜单实现说明

    jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如何用它来实现菜单神奇的效果吧. Step1 - HTML结构 看一下菜单的HTML代码,跟平常的菜单代码没有什么区别: 复制代码 代码如下: <div id="menu" class="menu"

  • jQuery实现响应鼠标背景变化的动态菜单效果代码

    jQuery实现响应鼠标背景变化的动态菜单效果代码

    本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

  • jquery实现鼠标滑过显示二级下拉菜单效果

    jquery实现鼠标滑过显示二级下拉菜单效果

    本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

  • jquery插件之easing 动态菜单

    很简单的一个效果插件,但不是经常用,怕忘了,以后在用又要去看文档,所以现在把笔记写下来,方便以后 复制代码 代码如下: <script> $(function(){ $.easing.def="easeInQuad";//设置默认效果 var callback=function (){ alert("ok"); } $("#t1").animate({ "top":600 },{duration: 3000, ea

  • jQuery插件实现多级联动菜单效果

    jQuery插件实现多级联动菜单效果

    开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

  • jQuery插件之Tocify动态节点目录菜单生成器附源码下载

    jQuery插件之Tocify动态节点目录菜单生成器附源码下载

    Tocify是一个能够动态生成文章节点目录的jQuery插件.假如我们有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑滚动到对应的节点,当然当滚动页面时,目录结构会根据当前监听到的节点进行切换到当前目录状态. 效果展示         源码下载 Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格,我们可以根据实际项目任选其中一种风格,另外必要条件jQuery 1.7.2+和jQuer

  • jQuery插件实现手风琴二级菜单

    jQuery插件实现手风琴二级菜单

    本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单,供大家参考,具体内容如下 HTML5结构要求: <div id="accordion"> <div> <p>一级菜单</p> <div> <p>二级菜单</p> <p>二级菜单</p> <p>二级菜单</p> </div> </div> <div> <p

  • jquery插件实现悬浮的菜单

    jquery插件实现悬浮的菜单

    每天学一个jquery插件-悬浮的菜单,供大家参考,具体内容如下 悬浮的菜单 又是一个很常见的效果,用上了a标签的一个常见的特性-锚点 效果如下 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>悬浮的菜单</title> <script src="js/jquery-3.4.1.min.js"><

  • jquery插件实现堆叠式菜单

    每天一个jquery插件-堆叠式菜单,供大家参考,具体内容如下 堆叠式菜单 一个多页面的特效 效果如下 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>堆叠式菜单</title> <script src="js/jquery-3.4.1.min.js"></script> <style

  • jquery插件ContextMenu设置右键菜单

    jquery插件ContextMenu设置右键菜单

    Struts项目中右键菜单一般很少用到,但是一旦客户有要求,很多人就懵圈了,比如我.这个时候,当然要表现镇定,一面拍着胸口对客户承诺说绝对可以实现,一面赶紧打开百度神器,搜搜看是否有前人已经写好的插件. 于是便找到了jQuery的ContextMenu插件.上官网看看Demo,真不错,正是我要的效果.源码下下来,却没有说明文档告诉我们该如何组装,可能写这插件的牛人们觉得步骤太简单,写出来都觉得丢人.可苦了我们这等愚昧之徒,研究半天,总算从一堆代码中取其精华弃其糟粕,形成最简练的代码,以供初学者们

  • 基于jQuery插件实现环形图标菜单旋转切换特效

    feature.presenter.1.5.css body { margin: 0; font-family: Tahoma; } .feature-presenter { position: absolute; } .feature-presenter-icon { background-color: white; text-align: center; transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95); -we

  • jquery插件之easing使用

    复制代码 代码如下: <script> $(function(){ $.easing.def="easeInQuad";//设置默认效果 var callback=function (){ alert("ok"); } $("#t1").animate({ "top":600 },{duration: 3000, easing:"easeInQuad",//可省略 complete: callb

  • 轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

    轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

    一.EasyUI创建简单的菜单 菜单(Menu)定义在一些 DIV 标记中,如下所示: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div

随机推荐