到目前位置, 我们都是创建的固定位置不动的动画。 如果想要实现运动状态的位移动画,那就必须使用自定义动画,并且结合 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 });