jQuery的animate动画方法及动画排队问题解决

时间 2021-07-25

标签 javascript css java jquery 异步 ide 函数动画 this url 栏目 JQuery 繁體版

原文原文链接

animate（）动画方法

做用：执行css属性集的自定义动画javascript
语法：$(selector).animate(styles,speed,easing,callback)css

• 参数1： css 的属性名和运动结束位置的属性值的集合。
• 参数2：可选，规定动画的速度，默认是 "normal"。其余值，“slow”、“normal”、“fast”，数字格式，单位为毫秒。
• 参数3：可选，规定在不一样的动画点中设置动画速度的 easing 函数，值包含 swing（变速）和linear（匀速）。
• 参数4：可选，animate 函数执行完以后，要执行的回调函数。
• 注意：①全部有数值的属性值均可以运动；
②其余的运动方法好比 slideUp() 等，也有参数3 和参数4java

<style>
       *{
                margin: 0;
                padding: 0;
            }
            p{
                position: relative;
                left: 0;
                margin-bottom: 10px;
                background-color: skyblue;
                width: 50px;
                height: 50px;
            }
        </style>
    <!--------------------------------------->
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
     <script src="../jq/jquery-1.12.4.min.js"></script>
     <script>
            var $ps = $("p");
            //实际操做中，将时间这种易变的存储到一个变量中更好
            var during = 1000;
            //全部有数值的属性值均可以运动
            $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},during,"swing")
            })
        </script>
    </body>

动画排队

同一个元素对象身上，若是定义了多个动画，动画会排队等待执行。
若是是不一样的元素对象都有动画，不会出现排队机制。
若是是其余非运动的代码，不会等待运动完成。好比，改变css样式，不会排队。

<style>
  div{
       width: 100px;
       height: 100px;
       border: 8px solid #ccc;
       position: absolute;
       left: 0;
       top: 0;
       background: url(../../imgs/1.jpg) no-repeat center center;
     }
.box2{
      border-radius: 50%;
      overflow: hidden;
       }
div span{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(221, 130, 130, 0.4);
     }
</style>
  <!-------------css样式------------------->
<body>
  <div class="box1"><span></span></div>
  <div class="box2"><span></span></div>
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
 var $box1 = $(".box1");
 var $box2 = $(".box2");
 var during = 2000;
 //动画排队对比
 $box2.animate({"left": 400,"top":400},during)
 //box一、box2上各自进行各自的动画
 //同一元素上的多个动画排队
 $box1.animate({"left": 400},during)//排队
 $box1.animate({"top": 400}, during)
 // 动画的底部就是一个定时器，异步加载
 // 非运动的代码，关于同一个元素对象的，不会排队
 //$box1.css("height",200)
 </script>
</body>

自带动画的显示隐藏方法，若是设置给同一个元素，也有动画排队

//其余的运动方法，若是设置给同一个元素，也会发生排队
  $box2.mouseenter(function(){
      $(this).children().slideUp(during)
  })
  $box2.mouseleave(function(){
      $(this).children().slideDown(during)
  })
  //鼠标快速的移上移下，以后box2的灰色span就一直在滑进滑出，直到执行完全部次数

同一个元素身上的运动，能够简化成链式调用的方法

//同一个元素进行多个运动，能够简化经过链式调用实现
//可是仍是要进行排队         
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

delay（）延迟方法

将delay（）设置在某个运动方法以前，表示后面的运动要在规定的时间以后再执行，有延迟运动的效果
delay（）的参数是时间的数值，其余的运动方法也有延迟效果

//延迟
$box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

stop（）中止动画方法

设置元素对象身上的排队的动画以何种方式进行中止jquery
stop（）有两个参数，能够获得四种中止方式，参数都是布尔值异步

• 参数1：设置是否清空后面的动画排队，若是是 true 表示清空(后面还排着的动画也一块儿被清除掉，再也不执行)，若是是 false 表示不清空只中止当前的一个动画（后面的动画当即开始执行）。
• 参数2：设置当前动画是否当即完成，若是是 true 表示当即完成，对象会马上走到结束位置，若是是 false 表示不完成当前动画，当即中止在当前位置。
ide

<style>
 div {
      width: 100px;
      height: 100px;
      border: 8px solid #ccc;
      position: absolute;
      left: 0;
      top: 40;
      background: url(../../imgs/1.jpg) no-repeat center center;
   }  
 div span {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(221, 130, 130, 0.4);
    }
 </style>
</head>
  
<body>
 <input type="button" value="true true" id="btn1">
 <input type="button" value="true false" id="btn2">
 <input type="button" value="false false" id="btn3">
 <input type="button" value="false true" id="btn4"><br>
  
 <div class="box1"><span></span></div>
  
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
   var $box1 = $(".box1");
  
   var during = 2000;
  
   //同一元素上的多个动画排队
   $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, during)
   $box1.animate({"left":0},during)
   $box1.animate({"top":40},during)
 
  // 中止动画
  //添加按钮点击事件
  var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")
  
  //true true  清空后面排队动画  且  当前动画当即完成，停到结束位置
  $btn1.click(function () {
       $box1.stop(true, true);
  })
  //true false  清空动画  停在当前
  $btn2.click(function () {
     $box1.stop(true, false);
  })
  //false false  不清空后面动画，停在当前
  //而后执行下一步动画
  $btn3.click(function () {
     $box1.stop(false, false);
  })
  //false true  不清空后面动画，当前运动当即到结尾
  $btn4.click(function () {
       $box1.stop(false, true);
  })
 </script>
</body>

默认状况下，参数值为false
实际工做中，通常要求清空后面的排队，中止当前的位置，多使用stop（true），第二个参数不设置默认为false

清空动画排队

动画排队问题

若是将开启运动的程序放在一个事件函数中，事件屡次被触发，会执行屡次函数，就会在一个元素身上添加了多个动画，会进行动画排队。(动画积累问题)函数

须要去清除排队的动画，进行防骚扰操做。动画
解决方法this

方法一：利用stop（）方法

在每个运动函数以前都增长一个stop（true），表示在运动执行以前，会将前面排队的动画清空，而后中止在当前位置url

<style>
 div {
     width: 100px;
     height: 100px;
     border: 8px solid #ccc;
     position: absolute;
     left: 0;
     top: 0;
     background: url(../../imgs/1.jpg) no-repeat center center;
   } 
div span {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(221, 130, 130, 0.4);
  }
  </style>
<body>
  <input type="button" value="true true" id="btn1">
  <input type="button" value="true false" id="btn2">
  <input type="button" value="false false" id="btn3">
  <input type="button" value="false true" id="btn4"><br>

  <div class="box1"><span></span></div>

  <script src="../jq/jquery-1.12.4.min.js"></script>
  <script>
     var $box1 = $(".box1");

     var during = 2000;
    //清空动画
    $box1.mouseenter(function(){
        $(this).children().stop(true).slideUp(during)
    })

   $box1.mouseleave(function(){
       $(this).children().stop(true).slideDown(during)
   })
    </script>
</body>

方法二：利用函数节流方法

若是元素在运动，直接return，不要执行后面的运动代码。

每一个jQuery对象，都能调用一个is（）方法，做用是显示元素对象的某种状态
若是参数位置是is("：animated")，animated是正在运动的意思，返回值是布尔值，true表示正在运动，false表示没有运动

//函数节流方法
$box1.mouseenter(function(){
    if(is(":animated")){
        //若是判断是正在运动的话，直接return返回，再也不执行其余动画
        return;
    }
    //没有运动的话，则继续执行后面的新动画
    $(this).children().slideup(during);

})

$box1.mouseenter(function(){
    if(is(":animated")){
        //若是判断是正在运动的话，直接return返回，再也不执行其余动画
        return;
    }
    //没有运动的话，则继续执行后面的新动画
    //有时候为了保险起见，会与stop（true）结合使用
    $(this).children().stop(true).slideup(during);

})

有时候为了保险起见，函数节流使用时，也会与stop（true）结合使用
stop（true）和函数节流方法，这两种解决动画积累问题的方法仍是有区别的。stop方法可使中止时，停在当前的位置，而函数节流，中止时return返回后，当前所处的动画通常都是会执行完的。