欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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动画