jQuery队列和动画链接不起作用

Question

我在使用jQuery将HTML中的某些动画链接时遇到麻烦。所有动画和宽度都通过CSS和transition属性处理。

页面首次加载时，它会提取一些数据并在计分板上填充一些动画。效果很好。

但是，我在记分板下方添加了一个按钮来处理更新。当您单击此按钮时，它应该做一些反向动画，用新数据填充记分板，然后再次显示原始动画。

但是，当我单击按钮时，不会发生这种情况。仅动画的第一步会发生。它不会完成所有反向动画，也不会填充新数据。它只是停止。控制台中没有任何错误。

我不知道为什么会这样。

var inSpeed = 500;
var outSpeed = 250;

$(document).ready(function() {
	$('body')
		.queue(elemsUpdate1())
		.queue(elemsShow('.match'))
		.queue(elemsShow('.player', 2))
		.queue(elemsShow('.score'))
		;
		
	$('.test').on("click", function() {
		$('body')
			.queue(elemsHide('.score'))
			.queue(elemsHide('.player', 2))
			.queue(elemsUpdate2())
			.queue(elemsShow('.player', 2))
			.queue(elemsShow('.score'))
			;
	})
});

function elemsHide(elem, count) {
	return function (next) {
		if (typeof count === "undefined") { count = 1; }
		
		$(elem)
			.addClass('fast').removeClass('display')
			.delay(inSpeed * count)
			.queue(function(){ $(this).addClass('hidden').dequeue(); })
			.delay(inSpeed)
			.queue(function(){ next(); });
	};
}

function elemsShow(elem, count) {
	return function (next) {
		if (typeof count === "undefined") { count = 1; }
		
		$(elem)
			.removeClass('fast hidden')
			.delay(inSpeed * count)
			.queue(function(){ $(this).addClass('display').dequeue(); })
			.delay(inSpeed)
			.queue(function(){ next(); });
	};
}

function elemsUpdate1() {
	return function (next) {
		$('#mm .title').html('Round One');
		$('#p1 .title').html('Player One');
		$('#p2 .title').html('Player Two');
		$('#s1 .title').html('0');
		$('#s2 .title').html('0');
		
		next();
	};
}

function elemsUpdate2() {
	return function (next) {
		$('#mm .title').html('Round One');
		$('#p1 .title').html('Player Three');
		$('#p2 .title').html('Player Four');
		$('#s1 .title').html('2');
		$('#s2 .title').html('1');
		
		next();
	};
}

:root {
	--body-width: 800px;
	--border-width: 5px;
	--slant-width: 20px;
	--flex-height: 40px;
	
	--border-color: rgba(000,000,000,0.5);
	--main-color1: rgba(000,255,255,0.5);
	--main-color2: rgba(000,255,000,0.5);
	--main-color3: rgba(255,000,000,0.5);
	
	--font-family: 'Franklin Gothic';
	--font-color: #FFF;
	--font-small: 24px;
	--font-large: 40px;
	--font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
	
	--fast-speed: 0.25s;
	--slow-speed: 0.50s;
	--xslow-speed: 1.00s;
	
	--match-width: 160px;
	--player-width: 200px;
	--score-width: 40px;
}

body {
	position: relative;
	margin: 0 auto;
	width: var(--body-width);
	color: var(--font-color);
	font-family: var(--font-family);
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}

.xslow { transition: all var(--xslow-speed) ease-out; }
.slow { transition: all var(--slow-speed) ease-out; }
.fast { transition: all var(--fast-speed) ease-in; }

.colorB { background: var(--border-color); }
.color1 { background: var(--main-color1); }
.color2 { background: var(--main-color2); }
.color3 { background: var(--main-color3); }

.flexbox
{
	display: flex;
	height: var(--flex-height);
	justify-content: center;
}

.toprow > div { border-bottom: 1px solid var(--border-color); }

.hidden { width: 0 !important; }
.display .title
{
	opacity: 1;
	padding: 0 calc(var(--slant-width) * 2);
}
.title
{
	line-height: var(--flex-height);
	min-width: var(--border-width);
	opacity: 0;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
	text-shadow: var(--font-shadow);
	white-space: nowrap;
}

.match { width: var(--match-width); min-width: calc(var(--slant-width) * 2); }

.player { width: var(--player-width); }
.player1 { text-align: right; }
.player2 { text-align: left; }

.score { width: var(--score-width); }
.score .title { padding: 0 var(--slant-width); }

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

	<div class="flexbox toprow tophidden slow">
	
		<div class="slantl color3 small score score1 slow hidden" id="s1">
			<div class="title slow">&nbsp;</div>
		</div>
		
		<div class="slantl color2 small player player1 xslow hidden" id="p1">
			<div class="title slow">&nbsp;</div>
			<div class="image"></div>
		</div>
				
		<div class="slantc color1 small match slow hidden" id="mm">
			<div class="title slow">&nbsp;</div>
		</div>
		
		<div class="slantr color2 small player player2 xslow hidden" id="p2">
			<div class="title slow">&nbsp;</div>
			<div class="image"></div>
		</div>
		
		<div class="slantr color3 small score score2 slow hidden" id="s2">
			<div class="title slow">&nbsp;</div>
		</div>
		
	</div>

<button class="test">update</button>