jQuery下的动画处理总结

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写在一起了。

(0)

相关推荐

  • jQuery结合HTML5制作的爱心树表白动画

    HTML代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http

  • jquery+html5烂漫爱心表白动画代码分享

    本文实例讲述了jquery+html5烂漫爱心表白动画代码.分享给大家供大家参考.具体如下: jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画,效果相当不错,非常有创意,很适合进行表白. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+html5烂漫爱心表白动画代码如下 <!DOC

  • 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"> <head> <tit

  • jQuery实现加入购物车飞入动画效果

    HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 复制代码 代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购物车按钮等信息. 复制代码 代码如下: <

  • 基于Jquery和html5实现炫酷的3D焦点图动画

    这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便.如果你需要在网站中展示产品图片,那么这款焦点图插件非常适合你. 在线演示源码下载 HTML代码 <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#"><img src=&quo

  • 基于jquery的direction图片渐变动画效果

    还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv

  • CSS+jQuery实现的一个放大缩小动画效果

    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus

  • Jquery中使用show()与hide()方法动画显示和隐藏图片

    (1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

  • 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"> <head> <meta http-equiv="Content-

  • jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

    本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果.分享给大家供大家参考,具体如下: 运行效果: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websocket

随机推荐