You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.1 KiB
50 lines
1.1 KiB
<!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>
|