<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>addClass Visual Test : Queue</title>
	<link rel="stylesheet" href="../../../themes/base/all.css">
	<style>
	.box {
		width: 100px;
		height: 100px;
		background-color: #000;
	}
	.red {
		background-color: #f00;
	}
	.green {
		background-color: #0f0;
	}
	.blue {
		background-color: #00f;
	}
	</style>
	<script src="../../../external/requirejs/require.js"></script>
	<script src="../../../demos/bootstrap.js" data-modules="effect" data-composite="true">
		$( "#box1" )
			.delay( 500 )
			.addClass( "red", 2000 )
			.delay( 500 )
			.addClass( "green", 2000 )
			.delay( 500 )
			.addClass( "blue", 2000 );
		$( "#box2" )
			.addClass( "red", 2000 )
			.delay( 500 )
			.addClass( "green", 2000 )
			.delay( 500 )
			.addClass( "blue", 2000 );
	</script>
</head>
<body>

<p>WHAT: The two boxes animate from black to red to green to blue.</p>
<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p>

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>

</body>
</html>