jQuery Review

As we discussed in the Intro to jQuery lecture, the jQuery library allows us to perform many operations on the DOM. We use the jQuery wrapper $( ) to either: a) access existing DOM elements (through CSS selector phrases or object variable names) or b) create new DOM elements on the fly. In all these cases, the wrapper returns an array, known as the wrapped set that contains 0 or more DOM elements.

Once we have a wrapped set, we can apply different jQuery methods to it, often in a chained fashion. Here are some of the methods we have seen so far organized on what they do (we've added some new methods that are similar to what we've seen):

• Methods that operate on the structure of DOM (adding or locating elements): .append(), .appendTo(), .parent(), .find(), .children(), .clone().
• Methods that operate on the content of elements: .html(), .text(), .val(), .attr().
• Methods that operate on the appearance and layout of elements: .css(), .show(), .hide(), .addClass(), .removeClass().
• Methods that implement event handling (by binding an anonymous function to the event type): .ready(), .click(), .submit(), .hover(), .mouseover(), .mouseout().

Today we will see more jQuery methods and functions.

Methods for jQuery effects

One of the more interesting uses of jQuery is to apply certain effects to elements on the page. To do this, jQuery modifies the CSS properties of an element, through a series of methods. Each of these methods operates on one or more CSS properties. For certain common effects, jQuery provides a series of ready-to-use methods methods, shown below:

• The methods .show(), .hide(), and .toggle() operate on the display property, making an element appear or disappear from its location in the page.
• The methods .fadeIn(), .fadeOut(), .fadeToggle(), and .fadeTo() operate on the opacity property by changing its value in the interval 0-1.
• The methods .slideUp(), .slideDown() and .slideToggle() operate on the height attribute, by changing it between the current height to zero and vice-versa.

To see more examples and explanations for all these jQuery Effects methods, you should consult the jQuery API documentation.

Custom effects with .animate()

Often you would like to do different kinds of effects from the ready-to-use ones we discussed in the previous section. jQuery allows you to do this with an all-purpose method, .animate(), which based on the passed arguments, can perform different kinds of animations.

Check first some of these animations in the examples page and then come back for understanding how the method works.

The .animate() method is very powerful, however, it can be applied only on CSS properties that have numerical values. Examples of such properties are: font-size, width, height, borders, margin, padding, position, text indent, letter spacing, etc.

The signature for the .animate() method is shown below:

$("some selector").animate({one or more CSS properties}, duration);

// Examples
$("#boxDiv").animate({'width': 600}, 1500);
$("#boxDiv").animate({'font-size': 40}, 1500);
$("#boxDiv p").animate({'letter-spacing': 15}, 1500);
$("#boxDiv").animate({'width': 400, 'height': 400, 'left': 500, 'opacity': 0}, 2500);

Repeating Animations

The kind of effects we discussed so far, apply once (if we click a button). However, in some occasions you might want to have an effect that either is invoked without user intervention, or that is repeated forever. To achieve this, two Javascript functions can be used: setInverval() and setTimeout().

The function setTimeout() is useful to create an effect once, without user intervention. Our example page, has a double fade effect that shows about 2 seconds after the page is loaded. Here is how the code for the function looks like.

function doubleFade(){
    $("#boxDiv").fadeOut(1000).fadeIn(1000);
}

// A one-time effect timed to happen 2000 milliseconds after page is loaded
setTimeout("doubleFade()", 2000);  

What is very important here is the fact that the name of the function being invoked has to be passed as a string (otherwise it will be executed right away, not when the timer indicates.