JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A" class="box"></div>
<div id="B" class="box"></div>
<div id="C" class="box"></div>
<div id="D" class="box"></div>
<li id="log"></li>

CSS

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 53px;
  left: 53px;
  margin-top: -51px;
  margin-left: -51px;
  
  opacity: 0.2;
  background: blue;
}

#log {
  list-style-type: none;
}

JavaScript

var T = 130,
  $log = jQuery("#log");

jQuery(".box").animate({ top: "100%" }, {
	duration: T,
  easing: "linear",
  progress: function( anim, progress ) {
  	// log progress
  	log( this.id, progress );
    
  	// stop animating A from B, accidentally skipping C
    if ( this.id === "B" && progress > 0.33 ) {
    	jQuery("#A").stop();
    }
	}
});

function log( label, progress ) {
  $log.append( "<li>" + label + " " + (progress * 100) + "%</li>" );
}