The clearQueue() method removes all items from the queue that have not yet been run. Note that when a function has started to run, it runs until it is completed.
Syntax:
$(selector).clearQueue(name);
Here “selector” is the selected element.
Parameter: It accepts a parameter “name” which is the name of the function.
Return Value: It returns the selected element with removed function.
Code #1:
In the below code, animation method is cleared.
< html > < head > </ script > < script > <!-- jQuery code to demonstrate clearQueue method --> $(document).ready(function() { <!-- click button to start animation --> $("#b1").click(function() { $("div").animate({ height: 200 }, 2000); $("div").animate({ width: 200 }, 2000); $("div").animate({ height: 100 }, 2000); $("div").animate({ width: 100 }, 2000); $("div").animate({ height: 200 }, 2000); $("div").animate({ width: 200 }, 2000); $("div").animate({ height: 100 }, 2000); $("div").animate({ width: 100 }, 2000); }); <!-- button to stop animation --> $("#b2").click(function() { $("div").clearQueue(); }); }); </ script > < style > div { background: green; height: 100px; width: 100px; } button { margin-top: 10px; } </ style > </ head > < body > < div ></ div > <!-- click on this button to start the animation --> < button id = "b1" >Start !</ button > <!-- click on this button to stop the animation at given situation --> < button id = "b2" >Stop !</ button > </ body > </ html > |
Output:
Before clicking any button-
After clicking the “Start !” and after some time “Stop !” button-
Code #2:
< html > < head > jquery/3.3.1/jquery.min.js"></ script > < script > <!-- jQuery code to demonstrate clearQueue method --> $(document).ready(function() { $(".b1").click(function() { $("p").animate({ borderRightWidth: "5px" }); $("p").animate({ borderTopWidth: "5px" }); $("p").animate({ borderLeftWidth: "5px" }); $("p").animate({ borderBottomWidth: "5px" }); }); $(".b2").click(function() { $("p").clearQueue(); }); }); </ script > < style > p { display: block; width: 150px; border: 1px solid green; padding: 10px; } </ style > </ head > < body > < p >This is a paragraph.</ p > <!-- click on this button to start the animation --> < button class = "b1" >Start</ button > <!-- click on this button to stop the animation at given situation --> < button class = "b2" >Stop</ button > </ body > </ html > |
Output:
Before clicking any button-
After clicking the “Start !” and after some time “Stop !” button-
leave a comment
0 Comments