JQ stop配合animate
程序员文章站
2024-03-25 12:33:28
...
1、stop(参数1,参数2)
PS:
(1)两个值都是可选的,可有可无,不写,默认false
(2)参数1:true 清除所有的动画; false 只结束当前动画
参数2:立即完成当前动画; false 不立即完成当前动画
2、eg:
$('.box').animate({'left': 600, 'top': 400, 'width': 500, 'height': 300}, 3000, function () {
$(this).css('background-color', 'red');
}).animate({'left': 10, 'top': 10, 'width': 200, 'height': 200}, 3000, function () {
$(this).css('background-color', 'orange');
});
$('button:first').click(function () {
//结束当前正在运动的动画
$('.box').stop();
});
$('button:eq(1)').click(function () {
//结束当前正在运动的动画 stop(false,false);
$('.box').stop(false, false);
});
$('button:eq(2)').click(function () {
//结束当前正在运动的动画 stop(false,false) 并立刻运动到当前 动画的 终点
$('.box').stop(false, true);
});
$('button:eq(3)').click(function () {
//结束所有动画
$('.box').stop(true, false);
});
$('button:eq(4)').click(function () {
//结束当前正在运动的动画 stop(false,false);
$('.box').stop(true, true);
});
上一篇: jq animate动画详解
下一篇: CSS3动画