Suppose there is a block movement through .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>

How to make it so that when end == end - ($('.block').width() * 3) animation changes, and abruptly and without “interrupting” the animation itself.
Let the block become background: green; border-radius: 100% background: green; border-radius: 100% .

  • What is bad progress ? - teran
  • or step , mb will be more convenient in this case - teran
  • @teran, about progress did not hear, and did not work with step . Thank you, read about them and try - CbIPoK2513

1 answer 1

The animate method has a number of callback functions that are called during the animation process. You may be interested in the step and progress methods.

  • step is called for each property being animated in each animation step, and the first parameter will be the current value of the property.
  • progress is called once for all properties for each step, then you will get the percentage of completion of the animation.

That is, using step , to simplify it, you can do something like this

 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>

  • This is exactly what you need! Thank you) - CbIPoK2513