jQuery: Effects (Part 2)

In this post, we will be discussing “Sliding” and “Chaining”. The “Sliding” effect consists of three parts and they are:

  1. slideDown()
  2. slideUp()
  3. slideToggle()

They are all very simple, they don’t require lots of code.


slideDown()

The slideDown() effect, slides or brings the element down, as following:

$("#panel").slideDown("fast");

So we selected the divOne div and we made it slide down fast, you can also add a callback if you wanted it.


slideUp()

Pretty much the same as slideDown() :

$("#panel").slideUp("fast");

slideToggle()

If the element is hidden then it slideDown(), if the element is not hidden then slideUp().

$("#panel").slideToggle("fast");

So this was sliding, pretty easy huh? Now we will be doing some jQuery “chaining”.

Chaining

Do you remember the on() event? Chaining is a bit like it, chaining means to run multiple actions in one single statement AND it has to be on one element only. Chaining can give a short/small loop effect but it doesn’t actually loop.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Is the same as:

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

But I find the second one cleaner and easier to read.


So that’s it for this post, make sure to practice, practice, practice. We will be doing a small jQuery test/project in the end of the tutorial, so prepare for it! Make sure to follow me on WordPress and Twitter.

 

See you in the next post.

 

— CODE DAILY

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s