JSFiddle - React, Tailwind, and code Playground

by echocarriet

HTML

<body>
	<div class="openbox">
		<input type="button" class="open" value="按下即開啟動畫">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
	<div class="openbox1">
		<input type="button" class="open1" value="按下即開啟動畫延遲效果">
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
	</div>
	

</body>

CSS

.box1,.box2,.box3,.box4,.box5,.box6{
	width: 100px;
	height: 100px;
	display: none;
}
.box1,.box4{
	background:#d9d9f3;
}
.box2,.box5{
	background:#ceefe4;
}
.box3,.box6{
	background:#fae3d9;
}

.openbox{
	width: 400px;
	height: 400px;
}

JavaScript

$(document).ready(function() {
	$('.open').click(function(event) {
		$('.box1').slideToggle();
		$('.box2').slideToggle();
		$('.box3').slideToggle();
	});
	$('.open1').click(function(event) {
		$('.box4').delay(0).slideDown();
		$('.box5').delay(2000).slideDown();
		$('.box6').delay(3000).show(0);
	});
/*因為show預設是立即出現，所以如果show沒有設數值則會和.box4設
零秒的delay一起出現；設show想要依照delay數值則寫.show('0')即可*/
});