jQuery下的动画处理总结


Posted in Javascript onOctober 10, 2013

queue()/ dequeue()
这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知。这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码

$('#test').animate({
            "width": "300px",
            "height": "300px",
            "opacity":"1"
        });

这样test div的height、width、opacity是同时变化的,有时候我们不希望同步执行,而是形状的变化和透明度的变化分开,先变成300*300的div,然后透明度再逐渐变化,我们需要这么写

$('#test').animate({
            "width": "300px",
            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

同学们可以想象一下要是有十个动画流程,那代码是什么样的,queue()和dequeue()可以解决此类问题,为所有的流程方法见一个队列,让function依次调用,先看一下语法

queue( [queueName ], newQueue ) 操作欲执行队列方法

第一个参数是队列名称,不写的话默认是fx

第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数

dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function

每次调用此方法执行队列中下一函数

var q = [
            function () {
                $(this).animate({
                    "width": "200px",
                    "height":"200px"
                }, next)
            },
            function () {
                $(this).animate({
                    "width": "400px",
                    "height": "400px"
                }, next);
            }
        ];
        function next(){
            $('#test').dequeue('myQueue');
        }
        $('#test').queue('myQueue', q);
        next();

上面代码就是可以让test div先变成200*200的,然后再变为400*400的,每个动画都执行回掉函数,调用队列中下一个方法,两个动画依次执行,如果在执行期想再添加某个函数可以这样

var q = [
            function () {
                $(this).animate({
                    "width": "200px",
                    "height":"200px"
                }, next)
            },
            function () {
                $(this).animate({
                    "width": "400px",
                    "height": "400px"
                }, next);
            }
        ];
        function next(){
            $('#test').dequeue('myQueue');
        }
        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

总而言之这两个方法就是为了方便动画按照预定次序执行

clearQueue() /stop()

这两个方法主要是为了取消动画

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画

queue:正在进行的动画队列名称

clearQueue:默认值为false,是否将队列本身也清空

jumpToEnd:默认值为false,是否立即执行完动画

如果想停止刚才动画可以这么写

$('#test').clearQueue('myQueue');

这样写不会不会终止动画,只是当前动画执行完后,不会再调用队列中下一个动画(队列被清空了嘛,没有下一个了),如果想立即停止动画,可以这么写

$('#test').stop();

至于停止动画是暂停还是立即执行完,就学要配置stop()的参数了

slideDown()/ slideUp()/ slideToggle()

slide效果在做动画的时候经常会使用,尤其是菜单,这三个函数很简单,就是元素收起/伸展/自动判断收起伸展,但是其参数不仅仅是duration,我们还能加一些其他的控制,看看API中的介绍,这Sanger函数参数类似,那slideUp举例

slideUp( [duration ] [, easing ] [, complete ] ) easing是渐变方式,这个我从来没有手工改动过,duration不写的话,默认会用大概一秒的时间完成动画

slideUp(options)

options中常用的配置有

duration:动画时间

queue:这个看了上面自然会懂

step:动画过程中每次属性改动时执行

complete:动画完成时执行

start:动画开始时执行

always:动画被终止或者意外发生没有执行完时发生

这三个函数在执行的时候会修改元素height,在sideUp()执行完后会把height复原,并把diaplay设为none

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列类似,不再一一说明,只不过这三个函数修改的时元素的透明度,fadeOut()函数在执行完后会将元素opacity复原,并把display属性设为none

fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就没有那么复杂了,但是fadeTO()的duration和opacity不是可省略的,必须写

show()/ hide()/ toggle()

这三个函数的用法和slide系列一样,但是在效果上有几点儿不同

1.如果参数duration不写,那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原,并把display设为none

animate()
有些复杂的动画靠上面几个函数不能够实现,这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释,properties是个json,属性的值可以是字面量、function、”toggle”、简单表达式,如果是function会把返回值赋给属性,熟悉jQuery的同学肯定明白“toggle”是什么,就是让一个属性在初始值和最小值之间切换,能够使用toggle的属性有width、height、opacity等包含数字值属性,简单表达式是+=、-=等,比如可以这么些 “width”:”+=10px”。

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

如果传入了回掉函数,该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活,properties和前一个用法一样,常用options有

duration:动画时间

queue:function队列

step:每次属性调整的回掉函数

complete:完成动画的回掉函数

start:动画开始的时候调用

always:动画被终止或者意外发生没有执行完时发生

要不说jQuery好用,上面这几个配置是不是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });

hover()
严格说这个并不是个动画函数,但是由于低版本IE的hover对很多元素都不起作用,用CSS无法完成很多动作,所以经常需要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单,不多介绍了,这样就能把mousein 和mouseout写在一起了。

Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 #Javascript
JavaScript 垃圾回收机制分析
Oct 10 #Javascript
jQuery的attr与prop使用介绍
Oct 10 #Javascript
JavaScript 数组详解
Oct 10 #Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 #Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 #Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 #Javascript
You might like
MYSQL环境变量设置方法
2007/01/15 PHP
PHP 柱状图实现代码
2009/12/04 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Python读写Excel文件的实例
2013/11/01 Python
跟老齐学Python之集合(set)
2014/09/24 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
高一自我鉴定
2013/12/17 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
党支部三会一课计划
2014/09/24 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
师德师风培训感言
2015/08/03 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS