Queued animations
Description
The following code shows how to queue a custom function.
Example
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {<!-- w w w .j a va 2 s .co m-->
$(document.body).click(function() {
$("div").show("slow");
$("div").animate({
left : '+=20'
}, 2000);
$("div").queue(function() {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({
left : '-=20'
}, 500);
$("div").slideUp();
});
});
</script>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: yellow;
}
div.red {
background-color: red;
}
</style>
</head>
<body>
Click here...
<div>java2s.com</div>
</body>
</html>