IMPORTANT: This requires the jQuery-UI API.
Using effects for callbacks in other effects, or chaining effects, can be done quite easily really. As an example, lets say you have two block elements with separate identification variables, or divs with ids. Your code may look something like this:
<div id="pg1">
<p>Page 1</p>
<p><a href="#"><img src="img/128-1.png" /></a></p>
<p><a href="#"><img src="img/128-2.png" /></a></p>
<p><a href="#"><img src="img/128-3.png" /></a></p>
</div>
<div id="pg2" style="visibility:hidden">
<p>Page 2</p>
<a href="#"><img src="img/128-1.png" /></a>
<a href="#"><img src="img/128-2.png" /></a>
<a href="#"><img src="img/128-3.png" /></a>
</div>
Now if you want to use one page, and then click something, and move to the next, most people would utilize separate functions and jump between the two, this is where the [callback] portion of the calls comes in handy. This is assuming you have a block element with an id of p1.
$("#p1").click(function(){
$("#pg1").hide("bounce",{ times:1, direction:"left" },300, function(){
$("#pg2").removeAttr('style').show("bounce",{ times:1, direction:"right" },300);
});
});
Notice the second function() call within the hide effect. That's how you chain effects. Just declare that the value is a function, and run your code, simple as that.
NOTE: The extra block elements, or pages, need to be hidden, notice the removeAttr() function in the script, that way everything is done for you.
