2012-05-08 21:59:58 +00:00
|
|
|
<!doctype html>
|
2010-12-17 16:35:47 +00:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>addClass Visual Test : Queue</title>
|
2013-12-02 18:36:12 +00:00
|
|
|
<link rel="stylesheet" href="../../../themes/base/all.css">
|
2014-06-10 11:55:45 +00:00
|
|
|
<script src="../../../external/jquery/jquery.js"></script>
|
2013-12-02 18:36:12 +00:00
|
|
|
<script src="../../../ui/effect.js"></script>
|
2010-12-17 16:35:47 +00:00
|
|
|
<style>
|
|
|
|
|
.box {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
background-color: #000;
|
|
|
|
|
}
|
|
|
|
|
.red {
|
|
|
|
|
background-color: #f00;
|
|
|
|
|
}
|
|
|
|
|
.green {
|
|
|
|
|
background-color: #0f0;
|
|
|
|
|
}
|
|
|
|
|
.blue {
|
|
|
|
|
background-color: #00f;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
$(function() {
|
|
|
|
|
$( "#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>
|
|
|
|
|
|
2012-05-08 21:59:58 +00:00
|
|
|
<p>WHAT: The two boxes animate from black to red to green to blue.</p>
|
2012-05-15 14:07:05 +00:00
|
|
|
<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p>
|
2012-05-08 21:59:58 +00:00
|
|
|
|
2010-12-17 16:35:47 +00:00
|
|
|
<div id="box1" class="box"></div>
|
|
|
|
|
<div id="box2" class="box"></div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
