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

Question

我创建了两个箭头和两个计数器。箭头 1 在结束时计数计数器 1(第一个子项(向上动画，箭头 2 和计数器 2(子项 2(开始时计数。我尝试如下，但不起作用。我不明白有什么问题？请帮我解决这个问题。请参阅动画类的 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-->

Answer 1

也许 jquery 部分中的 setTimeout 函数是错误的，它必须遵循此结构

设置超时(回调，时间(

要解决此问题，您可以像以下一样进行更改

setTimeout(function() {
$('.arrow-one img').css({
'opacity': '1'
});
$('.mid-section-top-row-right-container:first-child').delay(1000 * i).fadeIn(1000);
}, 1000);
setTimeout(function() {
$('.arrow-two img').css({
'opacity': '1'
});
$('.mid-section-top-row-right-container:nth-child(2)').delay(1000 * i).fadeIn(1000);
}, 1000);

有关更多详细信息，请参阅此处的 setTimeout 函数。