1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8"> |
5 |
<title>addClass Visual Test : Queue</title> |
6 |
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> |
7 |
<script src="../../../jquery-1.9.1.js"></script> |
8 |
<script src="../../../ui/jquery.ui.effect.js"></script> |
9 |
<style> |
10 |
.box { |
11 |
width: 100px; |
12 |
height: 100px; |
13 |
background-color: #000; |
14 |
} |
15 |
.red { |
16 |
background-color: #f00; |
17 |
} |
18 |
.green { |
19 |
background-color: #0f0; |
20 |
} |
21 |
.blue { |
22 |
background-color: #00f; |
23 |
} |
24 |
</style> |
25 |
<script> |
26 |
$(function() { |
27 |
$( "#box1" ) |
28 |
.delay( 500 ) |
29 |
.addClass( "red", 2000 ) |
30 |
.delay( 500 ) |
31 |
.addClass( "green", 2000 ) |
32 |
.delay( 500 ) |
33 |
.addClass( "blue", 2000 ); |
34 |
$( "#box2" ) |
35 |
.addClass( "red", 2000 ) |
36 |
.delay( 500 ) |
37 |
.addClass( "green", 2000 ) |
38 |
.delay( 500 ) |
39 |
.addClass( "blue", 2000 ); |
40 |
}); |
41 |
</script> |
42 |
</head> |
43 |
<body> |
44 |
|
45 |
<p>WHAT: The two boxes animate from black to red to green to blue.</p> |
46 |
<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p> |
47 |
|
48 |
<div id="box1" class="box"></div> |
49 |
<div id="box2" class="box"></div> |
50 |
|
51 |
</body> |
52 |
</html> |