• Choose a category
• All
• Classic-Fiction

Note that I used < in one of the button captions. This HTML attribute displays the less-than symbol. Had I used the actual symbol (<), the browser would have thought I was beginning a new HTML tag and would have been confused.

The buttons all have id attributes, but I didn’t attach functions to them with the onclick attribute. After you’re using jQuery, it makes sense to commit to a jQuery approach and use the jQuery event techniques.

The only other important HTML element is the content div. Once again, this element is simply a placeholder, but I added CSS styling to make it obvious when it moves around. This element must be set to be absolutely positioned, because the position will be changed dynamically in the code.

Setting up the events

The initialization is all about setting up the event handlers for the various buttons. An init() function is called when the document is ready. That function contains function pointers for the various events, directing traffic to the right functions when a button is pressed:

function init(){

$(“#move”).click(move);

$(“#glide”).click(glide);

$(“#left”).click(left);

$(“#right”).click(right);

} // end init

As usual, naming conventions makes it easy to see what’s going on.

Don’t go chaining . . . okay, do it all you want

The move function isn’t really that radical. All it does is use the css() method described in Book VII, Chapter 2 to alter the position of the element. After all, position is just a CSS attribute, right? Well, it’s a little more complex than that.

The position of an element is actually stored in two attributes, top and left.

Your first attempt at a move function would probably look like this:

function move(){

$(“#content”).css(“left”, “50px”);

$(“#content”).css(“top”, “100px”);

} // end move

While this approach certainly works, it has a subtle problem. It moves the element in two separate steps. While most browsers are fast enough to avoid making this an issue, jQuery supports a really neat feature called node chaining that allows you to combine many jQuery steps into a single line.

Almost all jQuery methods return a jQuery object as a side effect. So, the line

$(“#content”).text(“changed”);

not only changes the text of the content node but also makes a new node. You can attach that node to a variable like this if you want:

var newNode = $(“#content”).text(“changed”);

However, what most jQuery programmers do is simply attach new functionality onto the end of the previously defined node, like this:

$(“#content”).text(“changed”).click(hiThere);

Easing on down

The jQuery animation() method supports one more option: easing. The term refers to the relative speed of the animation throughout its lifespan. If you watch the animations on the animate.html page carefully, you can see that the motion begins slowly, builds speed, and slows again at the end. This provides a natural-feeling animation. By default, jQuery animations use what’s called a swing easing style (slow on the ends and fast in the middle, like a child on a swing). If you want to have a more consistent speed, you can specify “linear” as the fourth parameter, and the animation works at a constant speed. You can also install plugins for more advanced easing techniques.

This new line takes the node created by $(“#content”) and changes its text value. It then takes this new node (the one with changed text) and adds a click event to it, calling the hiThere() function when the content element is clicked. In this way, you build an ever-more complex node by chaining nodes on top of each other.

These node chains can be hard to read, because they can result in a lot of code on one physical line. JavaScript doesn’t care about carriage returns, though, because it uses the semicolon to determine the end of a logical line. You can change the complex chained line so that it fits on several lines of the text editor like this:

$(“#content”)

.text(“changed”)

.click(hiThere);

Note that only the last