A Beginner’s Guide To JQuery

I don’t know about you, but the real reason I personally got into Javascript was that I wanted to do animations. Animations are cool. Everyone wants to add flashy effects with the least amount of effort and with JQuery (and a number of other Javascript frameworks), it is indeed possible. However, I thought that I wouldn’t be able to learn how to implement animations until a good while later as I assumed that animating DOM elements would require a strong foundation of knowledge on the framework. Well, that wasn’t the case. If you have any experience with programming, be it PHP, C#, Java or any other language, picking up Javascript, and thereafter, JQuery, will not take long at all.

To drive this point home, I am going to write this article with the pure intent of showing how easy it is to start making things MOVE using JQuery. Hopefully, this will show some people who are still on the fence with regards to learning JQuery or Javascript that it actually isn’t that difficult to begin using them, and is motivation enough to get them OFF the fence.

JQuery is easy!

Enough with the introduction. Let’s get to the code. For the first example, I’ll document how one starts writing JQuery, i.e. how to create the foundation upon which you can start writing JQuery code. Please excuse the ugly pre tags used in this article for documenting code. We are still working on implementing a code highlighting facility into this blog.

$(document).ready(function(){
     alert('Start writing some code here!');
});

Now, you may not understand exactly what is happening there, but the only thing that you really need to be aware of is that whatever code is located within the function passed inside the ready() function brackets will only be executed once JQuery and the markup for the page (or DOM – Document Object Model) has loaded. The reason for doing this is that if you don’t prevent the Javascript from running until the page has loaded properly, you may try to manipulate elements that have not even loaded yet, and thus, your code won’t work as was originally intended.

OK, OK! I know you want to start seeing stuff move. Let’s get to the fun part. Now, there are lots of different ways to manipulate elements around the page. The way JQuery moves elements around is that it simply alters the CSS of the element being manipulated over a specified period of time. In other words, if you want to change the size of the element, you would simply tell JQuery to animate the element from its existing height or width, to a new height or width, and will increase the size of the element using CSS bit by bit, over a period of time, until it reaches the size you specified. Most of the time, you won’t even have to worry about telling JQuery HOW to get from step 1 to step 10. It will guess on it’s own.

For moving elements, some people prefer to use margins, and others prefer to use absolute positioning. I prefer to use margins, at least most of the time, because you don’t have to worry about having to set the position:relative parameter for every parent container that has child elements moving around. Below is an example of moving an element using the margin-left property.

$(document).ready(function(){
    $('#element').animate({'margin-left':'100px'}, 200);
});

With that single line of code, on loading the page, you will witness the element with the ID ‘element’ move 100px to the right, because a 100px margin is slowly being added to the left of it. How easy was that? If we wanted to only move it when the person viewing the page clicks on the element itself, we can add it to the click event of the element, like below.

$(document).ready(function(){
     $('#element').click(function(){
          $('#element').animate({'margin-left':'100px'}, 200);
     });
});

We could even have the element move back to its original position once it has finished moving to the right, as shown below.

$(document).ready(function(){
     $('#element').click(function(){
          $('#element').animate({'margin-left':'100px'}, 200, null, function(){
               $('#element').animate({'margin-left':'0px'}, 200);
          });
     });
});

Using JQuery’s animate function is probably the best way to animate elements, as it allows for the most control over what the CSS should be changing to (and starting from as well). However, if you just want to perform a simple animation, such as, sliding an element up or down, JQuery has a bunch of methods that have that functionality built-in. See below for an example of using the slideUp and slideDown JQuery functions.

$(document).ready(function(){
     $('#element').click(function(){
          $('#element').slideUp(200, function(){
               $('#element).slideDown(200);
          });
     });
});

As you can see, it’s actually TOO easy to use JQuery. If it was any easier, developers would be out of work by now.

To check if there are already functions that accomplish the animations you want to achieve, be sure to check the JQuery API.

Be sure to check back next month for the next part, where I cover more advanced concepts, such as variable scope, and additional techniques for animating elements.

If you would like to view the full example, containing the code documented above, click here.