jQuery Show and Hide Part Tres
jQuery also affords the ability to trigger multiple events in succession using ’string succession’. The callback is not sent any arguments, but
$(this)
is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.
So for example we have three spans that we want to expand in succession. I don’t know you have a greeting that you want to display at the top of every page: “We Build Websites” “We love SEO” “We’re ashamed but maybe, just a little, we really enjoy N’Sync”…I don’t know, whatever you can think of. To do this, we would select all the spans with the ’span:eq(0)’ then show the first one. Once the first has been ’shown’, it triggers the next function which utilizes the selector ‘this’ to look for the ‘next’ span and repeat the process until there are no more ‘next’ spans. Take into account that any span in the markup will be hidden and shown….Any span. Here’s what the code would look like.
$('span:eq(0)').show('fast', function () {
/* use callee so don't have to name the function */
$(this).next('span').show('fast', arguments.callee);
});
All in all, these are some pretty powerful tools for setting up not only eyecandy but real usability for the end user. How would you utilize .show, .hide and chaining to help your users?
