jQuery——15——stop和delay方法

最新推荐文章于 2022-11-29 22:52:14 发布

野生小米椒

最新推荐文章于 2022-11-29 22:52:14 发布

阅读量237

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/102769501

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
       .one{
           width:100px;
           height: 100px;
           background-color: darkseagreen;
       }
       .two{
           width: 500px;
           height: 10px;
           background-color: darkslateblue;
       }
         
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
      /*
      在jQuery的{}中可以同时修改多个属性，用逗号隔开，多个属性的动画也会同时执行
      */
     $('button').eq(0).click(function(){
        /* $('.one').animate({
             width:500,
             height:500
         },1000)*/
         /*如果不想同时修改呢*/
         $('.one').animate({
             width:500,
             },1000)
             $('.one').animate({
            height:500
         },1000)
         //简化为链式编程   可再加上delay方法，用于高速系统延迟时长
        /*$('.one').animate({
             width:500
         },1000).delay(2000).animate({//2000是两秒的意思
             height:500
         },1000)*/
     })
   
     /*
     第一个参数为是否完成后续动画，(默认为false，值为false才完成后续动画)，第二个参数是是否完成当前动画(false，值为true才完成后续动画)，
     */
    $('button').eq(1).click(function(){
        //立即停止当前动画，继续执行后续的动画
        // $('.one').stop();
        // $('.one').stop(false);
        // $('.one').stop(false,false);

        //立即完成当前的，继续执行后续动画
        // $('.one').stop(false,true);

        //立即停止当前和后续所有的动画
        // $('.one').stop(true,false);
        // $('.one').stop(true);

        //立即完成当前的，并且停止后续所有的
        $('.one').stop(true,true);
    })
    })
      
      
    </script>
</head>

<body>
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——15——stop和delay方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
复制链接

扫一扫