jQuery基础---动画效果 (2)

到目前位置, 我们都是创建的固定位置不动的动画。 如果想要实现运动状态的位移动画,那就必须使用自定义动画,并且结合 CSS 的绝对定位功能。

$(\'.animate\').click(function () {

  $(\'#box\').animate({

    \'top\' : \'300px\',          //首先必须设置 CSS 定位

    \'left\' : \'200px\'

  });

});

自定义动画中, 每次开始运动都必须是初始位置或初始状态, 而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。

$(\'.animate\').click(function () {

  $(\'#box\').animate({

    \'left\' : \'+=100px\'

  });

});

自定义实现列队动画的方式有两种:

1.在回调函数中再执行一个动画;

2.通过连缀或顺序来实现列队动画。

//通过依次顺序实现列队动画

1 $(\'.animate\').click(function () { 2 3   $(\'#box\').animate({\'left\' : \'100px\'}); 4 5   $(\'#box\').animate({\'top\' : \'100px\'}); 6 7   $(\'#box\').animate({\'width\' : \'300px\'}); 8 9 });

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

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