主页 / 问题 / 952570
Accepted
De.Minov
Asked:2020-03-05 18:23:16 +0000 UTC2020-03-05 18:23:16 +0000 UTC

动画，不同时间的多个动作

  • 772

假设块有运动通过.animate()

let end = $('.way').width() - $('.block').width();
$('.block').animate({
  'left': end
}, 2000, 'linear');
.way {
  display: block;
  width: 100%;
  height: 50px;
  padding: 5px;
  border-radius: 5px;
  background: #ddd;
  box-sizing: border-box;
}

.block {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: red;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="way">
  <div class="block"></div>
</div>

此外，如何制作它以便在end == end - ($('.block').width() * 3)动画更改时突然且不“中断”动画本身。
假设块变为background: green; border-radius: 100%.

jquery

1 个回答

  1. Best Answer

    该方法animate有许多在动画过程中调用的回调函数。您可能对step和方法感兴趣progress。

    • step在动画的每一步被动画的每个属性调用，第一个参数将是属性的当前值。
    • progress为每一步的所有属性调用一次，在这里您可以获得动画的完成百分比。

    也就是说，使用step, 以一种简化的方式，它可以做这样的事情

    let end = $('.way').width() - $('.block').width();
let swPos = end - 3*$(".block").width();


$('.block').animate({
              left: end
            }, { 
              duration:  2000,  
              easing : 'linear',
              step: function(n, fx){                 
                 if(n >= swPos) $(this).addClass('block-2')
              }
            });
    .way {
  display: block;
  width: 100%;
  height: 50px;
  padding: 5px;
  border-radius: 5px;
  background: #ddd;
  box-sizing: border-box;
}

.block {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: red;
  position: relative;
}

.block-2 {
   background-color: black;
   border-radius: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="way">
  <div class="block"></div>
</div>

    • 3

相关问题