Queue() method is used in jQuery to returns a number of animations to be performed on the elements in the jQuery object. This method is used for the continuous looping of a jquery element. It returns the effect which is used in the queue. While queue(function) is used for adding another function to the end of the queue. This is the foundation for all animations in jQuery it allows series of function execution some methods which is used in this blog for the series of a transition. slideUp(), .slideDown(), .fadeIn(), and .fadeOut() all use .animate().
Source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>queue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 60px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
p {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $( "div" );
function runIt() {
div
.show( "slow" )
.animate({ left: "+=200" }, 2000 )
.slideToggle( 1000 )
.slideToggle( "fast" )
.animate({ left: "-=200" }, 1500 )
.hide( "slow" )
.show( 1200 )
.slideUp( "normal", runIt );
}
function showIt() {
var n = div.queue( " " );
$( "span" ).text( n.length );
setTimeout( showIt, 100 );
}
runIt();
showIt();
</script>
</body>
</html>
Note: This function is used fro the time count
var n = div.queue( "fx" );
0 Comment(s)