JQuery, the very very basics - Lesson 5

Published Monday, October 13, 2008 9:17 PM
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
 
Show / Hide a layer is such a common-place practice, yet before JQuery, I always have to be a little verbose (and most surely I have to do a quick search and grab some code, as in this case the vicitim of my theft is: http://www.geocities.com/technofundo/tech/js/showhide.html ):
 
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:
 
$('div').show();

$('div').hide();

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 :).

kick it on DotNetKicks.com

by xxxd
Filed under:

Comments

# DotNetKicks.com said on Monday, October 13, 2008 2:04 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# 2008 October 14 - Links for today « My (almost) Daily Links said on Tuesday, October 14, 2008 4:01 AM

Pingback from  2008 October 14 - Links for today « My (almost) Daily Links

# Code Monkey Labs said on Monday, October 20, 2008 9:20 AM

Pick of the week: Productivity 2.0: How the New Rules of Work Are Changing the Game General Is It Important To Write Good Code? : Fredrik Normén says, “absolutely yes”, and I completely agree! Mocking and Stubbing Easier Then Ever With Moq 2.6 : Daniel

# 2008 October 21 - Links for today « My (almost) Daily Links said on Tuesday, October 21, 2008 4:33 AM

Pingback from  2008 October 21 - Links for today « My (almost) Daily Links

This site

This Blog

Syndication

Sponsors

  • MaximumASP