jQuery动画一个结束然后开始第二个

Question

我分别创建两个箭头和两个计数器。箭头一与计数器1（第一个孩子）动画起来，在结束时进行计数，箭头二和计数器二（第二个孩子）开始。我尝试如下，但不起作用。我不明白这是怎么回事？请帮助我解决此问题。请参阅动画类的CSS代码。

    $('.mid-section-container').each(function(i) {
    	$('.arrow-one img').css({'opacity':'0'}).delay(1000*i).addClass('animate-arrow'),{}
    	$('.mid-section-top-row-right-container:first-child').fadeOut(0);
    	$('.arrow-two img').css({'opacity':'0'}).delay(8000*i).addClass('animate-arrow');
    	$('.mid-section-top-row-right-container:nth-child(2)').fadeOut(0);
    	setTimeout(function() {
    		$('.arrow-one img').css({'opacity':'1'});
    		$('.mid-section-top-row-right-container:first-child').delay(1000*i).fadeIn(1000);
    	},1000,	function() {
    		$('.arrow-two img').css({'opacity':'1'});
    		$('.mid-section-top-row-right-container:nth-child(2)').delay(1000*i).fadeIn(1000);
    	}, 1000);
    });
    
    $('.count').each(function() {
      var $this = $(this),
          countTo = $this.attr('data-count');
      
      $({ countNum: $this.text()}).animate({
        countNum: countTo
      },
    
      {
    
        duration: 8000,
        easing:'linear',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
          //alert('finished');
        }
    
      });  
    });

    .mid-section-container {
    	background: url(../images/mid-setion-bg.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    }
    .mid-section-top-row {
    	display: flex;
    	display: -webkit-flex;
    	width: 100%;
    	padding: 15px;
    //	border: 1px solid #fff;
    }
    .mid-section-top-row-left,
    .mid-section-top-row-right {
    	display: flex;
    	display: -webkit-flex;
    	justify-content: center;
    	align-items: center;
    	width: 50%;
    	height: 350px;
    //	border: 1px solid #fff;
    }
    .arrow-one,
    .arrow-two{
    	height: 131px;
    	margin: 0 10px;
    }
    .arrow-one img,
    .arrow-two img{
    	width: auto;
    	height: 100%;
    }
    .arrow-one {
    	border-bottom: 1px solid #353FF2; /*--blue--*/
    }
    .arrow-two {
    	border-bottom: 1px solid #D9CC1E; /*--yellow green--*/
    }
    
    .mid-section-top-row-right {
    	display: black;
    	flex-direction: column;
    }
    .mid-section-top-row-right-container {
    	display: flex;
    	display: -webkit-flex;
    	align-items: center;
    	width: 100%;
    	border-bottom: 2px solid #A53692; /*blue purple*/
    }
    .animate-arrow {
    	animation: animate 9s ease;
    	animation-delay: 0.4s;
    	transform-origin: 0 100%;
    }
    @keyframes animate {
    	0% {transform: scaleY(0);
    	}
    	100% {transform: scaleY(100%);
    	}
    }
    @-webkit-keyframes animate {
    	0% {transform: scaleY(0);
    	}
    	100% {transform: scaleY(100%);
    	}
    }
    .left {
    	width: 104px;
    	margin: 0 10px;
    	font-size: 48px;
    	font-weight: 700;
    }
    .right {
    	margin-left: 20px;
    	font-size: 20px;
    	font-weight: 500;
    	line-height: 20px;
    }
    .mid-section-top-row-right-container:first-child {
    	color: #353FF2; /*--blue--*/
    }
    .mid-section-top-row-right-container:nth-child(2) {
    	color: #D9CC1E; /*--yellow green--*/
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML

    <div class="mid-section-container">
    	<div class="mid-section-top-row">
    		<div class="mid-section-top-row-left">
    			<div class="arrow-one"><img src="images/arrow_blue.png" alt="arrow-blue" /></div>
    			<div class="arrow-two"><img src="images/arrow_yellow.png" alt="arrow-yellow" /></div>
    		</div>
    		<div class="mid-section-top-row-right">
    			<div class="mid-section-top-row-right-container">
    				<div class="left"><span class="counter-one count" data-count="1.6">0</span>M</div>
    				<div class="right">Some text here</div>
    			</div>
    			<div class="mid-section-top-row-right-container">
    				<div class="left"><span class="counter-two count" data-count="800">0</span>+</div>
    				<div class="right">Some text here</div>
    			</div>
    		</div>
    	</div>
    </div><!--mid-section-top-row-->