jQuery下的动画处理总结(2)

$('#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好用,上面这几个配置是不是很熟悉呢

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzdyp.html