JQuery, the very very basics - Lesson 5
On with our journey of learning JQuery. Thanks to all of you who has stayed and cheered me and made me go on, against my own lazy nature. So far, we have slowly walked through the bunch of commands by which we select, dress up, manipulate chains of elements and make them action bound.
Now, let's look at the tiny set of commands for special-effects: show / hide with a speed, slide up / slide down, fade in and out. After all, we are human, insatiable for animations and wow factors. (However, please do not overplay your hand. :))
Show / Hide, Slower and slower, then faster and faster
Now, with JQuery, we can just say, (yes, you guessed it), show() to show, hide() to hide, an element or a matched set of elements:
Of course, we can also tap the good sense of toggle() command, which can detect then reverse the state of a given element. Is it shown now? Yes -> then hide it; No -> show it.
Easy.
One cool thing about this show/hide/toggle business is that we can now add a speed element to really animate the magic of appearance, disappearance and reappearance.
Speed in other languages is a rare thing, however, it is a norm in JQuery. From now on, we will speed things up and down often and very much at ease, for example, slide, fade, animate, etc. There are three predefined speeds: slow, normal and fast. Of course you can always come up with a speed in measure of milliseconds that suits you.
The following one line of code slowly alternates a layer's showing and hiding.
$('div#toggle').toggle('slow'">);
Slide up and down, fade in and out
Sliding up and down a layer used to be a challenge. Not anymore. Now we can just use these tell-it-all commands:
slideUp(speed, callback), slideDown(speed, callback). Of course, do not forget toggle. With sliding, the toggle command is
slideToggle(speed, callback).
So is the case with fading in and out. The commands for fading are: fadeIn(speed, callback), fadeOut(speed, callback).
An example:
All right, see you next week (I wish I could give you a Sarah Palin wink :).
