01第1节:jQuery动画概述
#JavaScript#在jQuery中,除了可以淡入淡出、滑动效果之外,还可以使用animate()方法创建自定义的动画效果。
对于自定义的动画函数animate()方法,可以设置一些参数、速度和回调函数,以更灵活的配置动画效果的呈现。
02第2节:animate()方法基本功能
使用jQuery的animate()方法创建自定义动画的基本语法如下:
基本语法如下:
$(selector).animate({params},speed,callback);
基本语法说明如下:
第1个参数params必须存在,用于设置能够形成动画效果的CSS属性,可见动画效果是CSS样式实现的。第2个参数speed用于配置动画效果的速度,可选参数,如果没有值,则使用默认速度呈现动画。第3个参数callback是可选的,用于指定动画完成后所执行的函数名称。现在,我们来列举个例子,如果要让一个Html元素可以移动,需要设置该元素的position属性,这是动画的基础,完整代码如下:
此DIV会移动
在此代码中,在Html元素上使用了style属性来设置一个动画效果。运行后的结果如下:
此时,页面运行后,一个DIV放在页面的最左侧,不会移动,属于静止状态,现在,我们点击“移动”按钮,看是否可以移动。
此时,我们发现,DIV块完整的从左侧向右移动一段距离,产生了动画,这就是一个简单的动画效果。
能够让我们通过jQuery的animate()方法控制CSS样式设置的动画。
03第3节:animate()方法控制多个样式动画
我们知道,animate()方法产生的动画是由CSS样式形成的,一个CSS样式是一个动画效果,那么多个CSS样式就是多个动画效果了,此时,就可以实现更丰富的动画效果。
在使用多个CSS样式属性时,要使用英文的逗号隔开即可,如下是多动画的效果代码:
此DIV会移动
注意:在jQuery的animate()方法中,要使用Camel规范来编写属性,如paddingLeft,而不是padding-left,是没有中间的横杠的。
将上面的代码运行一下,看是如何移动的?
通过效果图,你会发现,DIV块向上和向右移动了,是具有2个动画效果的。
另外,animate()方法在设置CSS属性值时,是可以使用相对值的,就是相对于原来Html元素的当前值进行相加或相减操作(+=或-=运算)。
如下一段Jquery代码,就是使用了相对值的计算:
$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});});
04第4节:animate()方法使用已有的值
在jQuery中,animate()方法可以使用已经存在的值,可把CSS样式属性的动画值使用show/hide/toggle这3个值,用于配置动画的运动效果。
完整的Html+jQuery代码如下:
在此代码中,将id=div1元素的width属性值设置为toggle已有值。
运行一下效果吧:
此时的动画效果是,当单击“动画”按钮,则DIV块会以一定的速度显示和隐藏,且具有动画效果,不是生硬的隐藏和显示。
05第5节:animate()方法使用队列功能
在jQuery中,针对动画设置了队列的功能,就是可以同时编写多个动画,然后排成队,按队列的顺序一个一个的调用,从而达到连续性的动画。
使用队列的功能,可以做成像电影一样的功能,让多个画面连续性的动转,可持续一段时间,形成连续动画效果。
Html和jQuery完整代码如下:
在此代码中,设置了4个动作,执行时,jQuery会把它们放在一个队列中,按顺序执行,让这个div块形成连续的动画特效。
这是第二个特效了,再看一个:
这是最后一个,是上面所有动画的综合体现,位置在left和top都是300的位置。
06第6节:停止动画
一、不带参数
jQuery有一个stop()方法,主要功能是在动画完成前,可以停止动画的运行。也就是只要动画还没有演示完成,就可以停止,如果动画已运行完了,则无法停止。
jQuery中的淡入淡出、滑动、动画效果,都是可以使用stop()方法的。
stop()方法的基本语法如下:
$(selector).stop(stopAll,goToEnd);
stop()方法参数说明如下:
stopAll:可选参数,参数值是bool类型,可传入true或false。用于清除所有动画队列,然后可插入新的动画到队列中。goToEnd:也是可选的参数,用于指定是否立即完成当前动画,参数也是bool类型,参数值是true和false。默认情况下,stop()方法会清除在当前所选元素上指定的当前动画效果。
下面我们实战一下,使用stop()停止一下动画效果,完整的Html+jQuery代码如下:
在此代码,先使用slideDown()实现向下滑动功能,然后再使用top()停止滑动。效果如下:
上图中有2个按钮,先点击一下“开始”按钮,如下图所示:
在上图中,DIV开始从上向下滑动,动作很慢,现在再点击一下“停止”按钮,如下图所示:
在此图中,当停止之后,执行了stop()方法,DIV不再继续向下滑动了,如果再点“开始”,又会继续向下滑动。
二、带参数
jQuery的stop()方法,是可以带有参数的,可以传入bool类型的值,有2个可选参数。
下面我们来实战一下带参数的stop()方法的使用,完整代码如下:
开始停止停止所有停止但要完成
"开始"按钮会启动动画。
"停止"按钮会停止当前活动的动画,但允许已排队的动画向前执行。
"停止所有"按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。
"停止但要完成"会立即完成当前活动的动画,然后停下来。
HELLO
对于animate()方法的使用,大家重点是发挥CSS样式的功底,设计出复杂的动画效果,有了动画效果,才能利用animate()方法实现动画的动作,让动画更丰富多彩。
举报/反馈