jQuery: End a custom queue function using dequeue which allows the queue to keep going

Last update on August 19 2022 21:51:36 (UTC/GMT +8 hours)

jQuery Fundamental - II : Exercise-76

End a custom queue function using dequeue which allows the queue to keep going.

Note: .dequeue() method is used to execute the next function on the queue for the matched elements. When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>End a custom queue function using dequeue which allows the queue to keep going.</title>
</head>
<body>
<button>Start</button>
<div></div>
</body>
</html>

CSS Code :

div {
margin: 25px;
width: 40px;
position: absolute;
height: 40px;
left: 10px;
top: 40px;
background-color: green;
}
div.red {
background-color: red;
}

JavaScript Code :

$( "button" ).click(function() {
$( "div" )
.animate({ left:"+=200px" }, 1500 )    .animate({ top:"0px" }, 400 )
.queue(function() {
$( this ).toggleClass( "red" ).dequeue();
})
.animate({ left:"10px", top:"30px" }, 400 );
});

See the Pen jquery-fundamental-exercise-76 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Click on a paragraph and add another paragraph.
Next: Find all inputs that are descendants of a form and mark them with a dotted red border. Give a green background to inputs that are descendants of a fieldset that is a descendant of a form.