基本动画

  • show() //直接显示元素,没有动画
  • show(speed, [callback]) //有动画,有回调函数
  • hide() //直接隐藏元素,没有动画
  • hide(speed, [callback]) //有动画,有回调函数
  • toggle() //切换可见状态
  • toggle(speed, [callback]) //有动画效果
  • toggle(switch) //switch决定是显示还是隐藏

滑动动画

  • slideDown(speed, [callback]) //向下增加高度,以显示内容,有动画效果
  • slideUp(speed, [callback]) //向上减小高度,以隐藏内容,有动画效果
  • slideToggle(speed, [callback]) //动态改变高度,动态显示和隐藏

淡入淡出动画

  • fadeIn(speed, [callback]) //淡入效果,动画结束会改变display来显示元素
  • fadeOut(speed, [callback]) //淡出效果,动画结束会改变display来隐藏元素
  • fadeTo(speed, opacity, [callback]) //动态改变透明度效果,不影响display属性

自定义动画

  1. animate(params, [duration], [easing], [callback])

    • 属性值一般为数字,也可以是hide,show,toggle关键字
    • 属性值也可以是数组形式,第一个数组元素是属性的最终状态,第二个数组元素是缓动函数
    • 不能使用margin-left这种形式,而需要使用驼峰形式marginLeft
    • 可以使用em和%,也可以使用+=或者-=让元素做相对运动
    • 如果duration=0,那么直接完成动画
  2. animate(params, options)
    • 基本同上
    • 需要注意easing和specialEasing参数,前面提到过params中也可以设置缓动函数,需要注意优先级
    • queue参数决定当前动画是否加入队列,默认值为true,表示加入默认队列fx;如果是false代表不加入队列;如果是字符串,代表加入自定义队列,加入自定义队列后不会自动运行而需要自己调用dequeue(queueName)来启动
    • step参数表示执行动画的每一步,可以用来实现自定义动画
  3. stop([queueName], [clearQueue], [gotoEnd])
    • 如果clearQueue=true,那么清空动画队列
    • 如果gotoEnd=true,那么立即完成当前动画,可能会有闪烁现象
  4. 对animate函数的总结:
    • 一个元素调用animate设置多个属性,代表多个属性同时动画
    • 一个元素调用多次animate,那么动画效果是一个接着一个的
    • 多个元素分别调用animate,那么多个元素同时动画
    • 可以利用回调函数实现多个元素一个接着一个动画
    • 下面使用动画队列实现多个元素一个接着一个动画,不依赖回调函数

动画队列

  1. queue([queueName]) //返回数组,代表事件队列
  2. queue([queueName], [queueArray]) //替换队列,如果是空数组也可以达到清空队列的目的
  3. queue([queueName], [callback]) //添加函数到队列
  4. dequeue([queueName]) //返回下一个函数,并且执行它,该函数必须直接或者间接的调用dequeue函数,直到队列为空
  5. clearQueue([queueName]) //清空队列
  6. delay(duration, [queueName]) //添加延迟到队列中
  7. 动画队列总结:
    • 除去show();hide();toggle();这些不带参数的函数,其它动画函数都会添加到队列中
    • 动画队列和Promise有点像,但还是不一样,Promise函数每次调用返回值都是Deferred对象,所以可以链式调用;动画队列是依靠循环调用dequeue函数来实现一个接着一个执行函数。
    • 动画队列和动画队列名称是相关的,默认名称是fx,但是和调用对象也是相关的。
    • 可以添加任意函数到队列中,就算是ajax,setTimeout等异步函数,咱也可以在其回调函数中调用dequeue函数,从而达到依次执行的目的。

动画全局控制

  1. jquery.fx.off=true; 没有动画效果,立即完成动画
  2. jquery.fx.interval=13; 动画间隔,默认值是13,值越小,动画效果越流畅,也更加消耗CPU资源;值越大,动画效果就越不流畅。

判断是否正在动画

$this.is(":animated");

扩展animate函数

主要就是扩展$.fx.step对象,比如:

// jquery.path.js插件,实现贝塞尔曲线动画
jQuery.fx.step.path = function(fx) {
var css = fx.end.css( 1 - fx.pos );
if ( css.prevX != null ) {
jQuery.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );
}
fx.elem.style.top = css.top;
fx.elem.style.left = css.left;
};
// jQuery UI 颜色动画
jQuery.fx.step[ hook ] = function( fx ) {
if ( !fx.colorInit ) {
fx.start = color( fx.elem, hook );
fx.end = color( fx.end );
fx.colorInit = true;
}
jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
};
// animate函数可以实现size属性动画效果
jQuery.fx.step['size'] = function(fx)
{
if ( !fx._sizeInit )
{
var \$el = \$(fx.elem),
c = fx.end.center || {top: 0, left: 0}; fx.start = \$el.offset();
$.extend(fx.start, {width: $el.width(), height: $el.height()}); fx._sizer = {}; fx._sizer.topDelta = c.top - (c.top * fx.end.height / fx.start.height);
fx._sizer.leftDelta = c.left - (c.left * fx.end.width / fx.start.width);
fx._sizer.widthDelta = fx.end.width - fx.start.width;
fx._sizer.heightDelta = fx.end.height - fx.start.height; fx._sizeInit = true;
} fx.elem.style.top = fx.start.top + Math.floor(fx._sizer.topDelta * fx.pos) + 'px';
fx.elem.style.left = fx.start.left + Math.floor(fx._sizer.leftDelta * fx.pos) + 'px';
fx.elem.style.width = fx.start.width + Math.floor(fx._sizer.widthDelta * fx.pos) + 'px';
fx.elem.style.height = fx.start.height + Math.floor(fx._sizer.heightDelta * fx.pos) + 'px'; }

参考文章

  1. Extending jQuery Animate() Beyond Basic CSS Animation
  2. Extending jQuery Animation - Custom Property "Size"
  3. The jQuery animate() step callback function
  4. weepy/jquery.path
  5. test: jquery.path animation
  6. louisremi/jquery.path
  7. jQuery Scroll Path自定义轨迹路径插件--制作圆形动画循环组合导航菜单

注意:

  1. 代码中$前面的\是避免markdown解析错误而添加的
  2. 参考文章中最后一个链接被博客园禁止了,去掉链接中的%3D就好了

jquery动画总结的更多相关文章

  1. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  4. jquery动画,基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  5. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  6. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  7. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  8. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  9. Velocity – 另外一款加速的 jQuery 动画插件

    Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...

  10. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

随机推荐

  1. Inna and Binary Logic

    Codeforces Round #234 (Div. 2) E:http://codeforces.com/problemset/problem/400/E 题意:给你n个数,然后每相邻的两个数可以 ...

  2. sql server 发布时提示'dbo.sysmergepublications'无效的解决办法

    对数据库进行数据库复制.订阅时经常会出现各种奇怪的问题 如果你对数据库进行多次发布.删除发布操作时可能会提示“dbo.sysmergepublications”无效的问题, 可以使用以下方法解决: U ...

  3. 查看Redis信息和状态

    原文转自:http://redisdoc.com/server/info.html INFO [section] 以一种易于解释(parse)且易于阅读的格式,返回关于 Redis 服务器的各种信息和 ...

  4. Maven实战三

    转载:http://www.iteye.com/topic/1123228 1. 三套生命周期     Maven拥有三套相互独立的生命周期,它们分别为clean,default和site. 每个生命 ...

  5. Extjs4中tabPanel

    好文章引用:Extjs4 TabPanel例子 感谢原作者...

  6. 【数学相关、规律】Codeforces 696B Puzzles

    题目链接: http://codeforces.com/problemset/problem/696/B 题目大意: 给一棵树,从根节点开始递归,time=1,每次递归等概率随机访问这个节点的子节点, ...

  7. 使用DateAdd方法向指定日期添加一段时间间隔,使用TimeSpan对象获取时间间隔

    一:使用DateAdd方法向指定日期添加一段时间间隔,截图 二:代码 using System; using System.Collections.Generic; using System.Comp ...

  8. 调用系统api修改系统时间

    一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  9. android快捷简单的实现音乐播放器

    自己做了一个相对完整的音乐播放器,现在把播放模块提取出来,分享给大家.音乐播放器基本功能都实现了的,可能有些BUG,希望谅解. 播放器功能如下: 1.暂停,播放 2.拖动条实现,快进,快退 3.歌词同 ...

  10. hibernate生成查询语句但查不到数据

    hibernate能够生成查询语句 说明它已经进行了查询操作 返回结果数据记录为0  很可能出现的情况 是  :该查询未未访问到指定数据库表. 当使用的数据库为oracle数据库时,你会在bean配置 ...