queue() Method:
Queue method is used to display the queue of functions waiting to be get executed on selected html element. In a queue there can be one or more functions waiting to execute on selected html element. We can also manipulate the queue of functions to be executed on the selected html element.
Syntax:
$(selector).queue(queueName)
Example:
<!DOCTYPE html>
<html>
<head>
<title>Queue Function in jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".start").click(function(){
var div = $("div");
div.animate({height: 300}, "slow");
div.animate({width: 300}, "medium");
div.animate({height: 80}, "slow");
div.animate({width: 100}, "slow");
$("span").text(div.queue().length);
});
});
</script>
</head>
<body>
<button class="start" style="backgound:grey;border:1px solid #333 ;border-radius:7px;padding:8px;">Start Animation</button>
<p>Queue length is: <span></span></p>
<div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:beige;border:1px solid grey;"></div>
</body>
</html>
In the above example we are performing multiple effects on div by using animate method when the user will click on start animation button.
Working Demo: https://jsfiddle.net/cff48c2z/
0 Comment(s)