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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
了解了这些才能开始发挥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
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
浅谈php和.net的区别
2014/09/28 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php 基础函数
2017/02/10 PHP
PHP微商城开源代码实例
2019/03/27 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
开始着手第一个Django项目
2015/07/15 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
深入浅析python的第三方库pandas
2020/02/13 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
人力资源专业推荐信
2013/11/29 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
法制宣传教育方案
2014/05/09 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
房产分割协议书范文
2014/11/21 职场文书
英雄儿女观后感
2015/06/09 职场文书