目录

1.操作多个属性

2.使用相对值

3.使用预定义的值

4.通过连缀或者顺序来实现列队动画

5.停止动画

6.延时动画

---

 简介

    jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法 满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。

  语法

    $(selector).animate({params},speed,callback);

    参数

      params:必须参数,定义形成动画的 CSS 属性。

      speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

       callback: 参数是动画完成后所执行的函数名称。

  使用

1.操作多个属性

$("button").click(function(){
  	$("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
  	});
 });

注意:一个 CSS 变化就是一个动画效果,上面的例子中,已经有四个 CSS 变化,已经 实现了多重动画同步运动的效果。

2.使用相对值

$("button").click(function(){
  	$("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
  	});
});

3.使用预定义的值

    可以把属性的动画值设置为 "show"、"hide" 或 "toggle”

$("button").click(function(){
	$("div").animate({
   		height:'toggle'
  	});
});

4.通过连缀或者顺序来实现列队动画

$("button").click(function(){
 	var div=$("div");
	div.animate({height:‘300px’,opacity:‘0.4’},“slow”);	
	div.animate({width:‘300px’,opacity:‘0.8’},“slow”);	
	div.animate({height:'100px',opacity:'0.4'},"slow");
  	div.animate({width:'100px',opacity:'0.8'},"slow");
});

$("button").click(function(){
  	var div=$("div");
div.animate({height:‘300px’,opacity:‘0.4’},“slow”).animate({width:‘300px’,opacity:‘0.8’},“slow”).animate({height:'100px',opacity:'0.4'},"slow”).animate({width:'100px',opacity:'0.8'},"slow”);
});

5.停止动画

          stop(clearQueue, gotoEnd)

          第一个参数:是否清空动画队列.

            默认false

          第二个参数:是否显示到当前动画最后位置

            默认false

      示例

        stop(false) 停止当前动画,后续队列中的动画继续执行

        stop(true) 止当前动画,并清空后续队列中的所有动画

        stop(false,true)当前动画立即执行完毕,后续队列中的动画继续执行

        stop(true,true)当前动画立即执行完毕,并清空后续队列中的所有动画

6.延时动画

        有时在执行动画或列队动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay() 方法。这个方法可以在动画之前设置延迟,也可以在列队动画中间加上