jQuery: Effects (Part 2)

Objectives

  • slideDown()
  • slideUp()
  • slideToggle()

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 easier to read.

 

Advertisements

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