48-jQuery的stop和delay

最新推荐文章于 2023-06-16 15:16:39 发布

杨亚仑

最新推荐文章于 2023-06-16 15:16:39 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery入门练习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/84255517

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文深入讲解了jQuery中动画控制的方法，包括如何使用delay方法实现动画延时，以及stop方法的四种不同用法来精确控制动画的停止或完成，帮助读者掌握更高级的jQuery动画技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了jQuery的delay和stop。

delay是延缓时长。

stop可分为四种情况。

1.立即停止当前动画，继续执行后续动画

$("div").stop(); $("div").stop(false); $("div").stop(false,false);

2.立即停止当前和后续动画

$("div").stop(true); $("div").stop(true,false);

3.立即完成当前的，继续执行后续动画

$("div").stop(false,true);

4.立即完成当前的，并且停止后续所有的

$("div").stop(true,true);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-jQuery的stop和delay</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            width: 100px;
            height: 100px;
            background: red;
        }
        .two{
            width: 500px;
            height: 10px;
            background: blue;
        }
    </style>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
         $(function () {
                 //    编写jQuery相关代码

             $("button").eq(0).click(function () {
                 //在jQuery的{}中可以同时修改多个属性，多个属性的动画也会同时执行
             /*    $(".one").animate({
                     width:500,
                     height:500
                 },1000)*/
             //    需求一：若想先执行增宽，再执行增高怎么办？使用动画队列
                /* $(".one").animate({width:500},1000).animate({height:500},1000)*/
             //    需求二：若想先执行增宽，等两秒后，再执行增高怎么办？
                /* $(".one").animate({width:500},1000).delay(2000).animate({height:500},1000)*/
             //    delay方法的作用就是用于延长时间

                 //宽度从100到500，高度从100到500，宽度再从500到100，高度再从500到100
                 $(".one").animate({width:500},1000).animate({height:500},1000).animate({width:100},1000).animate({height:100},1000)

             })
             $("button").eq(1).click(function () {
             //    1.立即停止当前动画，继续执行后续动画
             //     $("div").stop();
             //     $("div").stop(false);
             //     $("div").stop(false,false);
             //    2.立即停止当前和后续动画
             //     $("div").stop(true);
             //     $("div").stop(true,false);
             //    3.立即完成当前的，继续执行后续动画
             //     $("div").stop(false,true);
             //    4.立即完成当前的，并且停止后续所有的动画
                 $("div").stop(true,true);
             })
         })
    </script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>