Animated DIV slide

I’ve been working with jQuery quite a lot over the past week to get the commentluv settings page up and running and get the new commentluv plugin working as promised. It always amazes me at how incredibly easy it is to get it to do cool things with a web page.

Not just Ajax things, simple effects that allow you to take a page from a digital piece of paper to a digital pop-up book! Click here for an example..

Look at me!

Send me back up

Example explained

(you should have the jQuery library loaded in the head of your document, my wordpress already does this but if yours doesn’t you’ll have to put a line like this in the head of your page)

step 1: create a hidden div with an id of “first” and put something in it.

<div id="first" style="border: 1px solid #000">
<img><p style="color:white">Look at me!</p>

You can set the style inline with the div or your could add something like this to your style sheet

#first { display: none; } 

Something to note, an ID= is used if it is the ONLY one, a class= is when you have more than one. If you’d used class=”first” on the div above and had an entry in your stylesheet like this

.first { display: none; } 

then every div or img or span you gave a class of “first” to would be initially invisible.

step 2: Now you need to trigger an event to slide the div down. That’s as simple as putting a html link with an onclick attr and use a built in jQuery effect.
onclick is an attribute you can put on html objects like ‘a href’ links or images or other parts of your page. You put the javascript or function you want running in the quotes and whenever that object is clicked, the javascript gets run.

<a href="#">Click here for an example..</a>

Here, the javascript we want to run is jQuery(‘#first’).slideDown(1000);

It’s this little bit that does the magic.

Sometimes people use $ instead of the word jQuery which will work in most cases but here on WordPress there is the prototype library too and that uses the $ symbol for it’s calls so to be safe and get it to work without clashing with other libraries we use jQuery.

We call jQuery and tell it what we are targeting in the brackets. Because we are using an ID, we use ‘#first’. Had we used a class then we would put ‘.first’ and then we attach the slideDown event with a speed of 1000 ms by putting .slideDown (notice the captial ‘D’) on the end of the target and a speed 1000 in the brackets.

step 3: slide it back up
You should be able to guess how this was done, instead of using slideDown, we used slideUp

<a href="#">Send me back up</a></h2>

That’s it, easy peasy!

You can find out all the commands available to jQuery here