Queuing of Effects with Other Operations

Contact Us or call 1-877-932-8228
Queuing of Effects with Other Operations

Queuing of Effects with Other Operations

If you want to perform an operation, such as changing a class, during an effects sequence, you can queue the operation as if it were an effect. The $.fn.queue(callback) function receives a callback function to add to the queue, which will be invoked at that point in the sequence. The function should perform its operation, and then directly or indirectly invoke $.fn.dequeue() on the same selection.

// Shows the element, changes the class
// and then hides it
// notice the use of delay() to allow you to see each effect on the browser

$(document).ready(function(e) { 
	$('h2') .delay(1000)
		 .queue(function() { 

Code Sample:

---- C O D E   O M I T T E D ----
<div id="div1" class="funtimes">Fun</div>
<div id="div2" class="funtimes">Fun</div>
<script src="../../jqy-libs/jquery.js"></script> 
$('#div1')       // try changing to '.funtimes'
	.queue(function() { $(this).addClass('blue').dequeue(); })

The two animations run in parallel, because they affect different elements. Both fade in, delay, and fade out again, but the div2 box changes color due to the queued operation in the middle. If you change the first selector to '.funtimes', then the operations will run in succession, since the first effects chain now applies to div2 as well, so the second set of operations gets added to its queue (div2 will fade in and out twice, once from the first chain, and then again from the second chain).