jQuery自定义动画

 

目录

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")