• Choose a category
• All
• Classic-Fiction

Building the move() function with chaining

Object chaining makes it easy to build the move() function so that it shifts the content’s left and top properties simultaneously:

function move(){

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

.css(“top”, “100px”);

} // end move

This function uses the css() method to change the left property to 50px. The resulting object is given a second css() method call to change the top property to 100px. The top and left elements are changed at the same time as far as the user is concerned.

Building time-based animation with animate()

Using the css method is a great way to move an element around on the screen, but the motion is instantaneous. jQuery supports a powerful method called animate() that allows you to change any DOM characteristics over a specified span of time. The glide button on animate.html smoothly moves the content div from (50, 100) to (400, 200) over 2 seconds:

function glide(){

//move to initial spot

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

.css(“top”, “100px”);

//slide to new spot

$(“#content”).animate({

“left”: “400px”,

“top”: “200px”

}, 2000);

} // end glide

The function begins by moving the element immediately to its initial spot with chained css() methods. It then uses the animate() method to control the animation. This method can have up to three parameters:

♦ A JSON object describing attributes to animate: The first parameter is an object in JSON notation describing name/value attribute pairs. In this example, I’m telling jQuery to change the left attribute from its current value to 400px, and the top value to 200px. Any numeric value that you can change through the DOM can be included in this JSON object. Instead of a numerical value, you can use “hide,” “show,” or “toggle” to specify an action. Review Book IV, Chapter 4 for more details on JSON objects.

♦ A speed attribute: The speed parameter is defined in the same way as the speed for fade and slide animations. You find three predefined speeds: slow, medium, and fast. You can also indicate speed in milliseconds; for example, 2000 means two seconds.

♦ A callback function: This optional parameter describes a function to be called when the animation is complete. The use of callback functions is described earlier in this chapter in the section “Fading an element in and out.”

Move a little bit: Relative motion

You can also use the animation mechanism to move an object relative to its current position. The arrow buttons and their associated functions perform this task:

function left(){

$(“#content”).animate({“left”: “-=10px”}, 100);

} // end left

function right(){

$(“#content”).animate({“left”: “+=10px”}, 100);

} // end left

These functions also use the animate() method, but you see a small difference in the position parameters. The += and –= modifiers indicate that I want to add to or subtract from (respectively) the value rather than indicating an absolute position. Of course, you can add as many parameters to the JSON object as you want, but these are a good start.

Note that because I’m moving a small amount (10 pixels), I want the motion to be relatively quick. Each motion lasts 100 milliseconds, or 1⁄10 of a second.

Modifying Elements on the Fly

The jQuery library supports a third major way of modifying the page: the ability to add and remove contents dynamically. This is a powerful way to work with a page. The key to this feature is another of jQuery’s most capable tools — its flexible selection engine. You can also use numerous attributes to modify nodes. The changeContent.html page, shown in Figure 3-4, demonstrates some of the power of these tools.

Figure 3-4: The default state of changeContent is a little dull.

Of course, the buttons allow the user to make changes to the page dynamically. Clicking the Add Text button adds more text to the content area, as you can see in Figure 3-5.

♦ The clone button is interesting, because