Category: Energizing pages with animations and effects

This lesson introduced you to the animated effects that jQuery makes available out of the box as well as to the animate() method that allows you to create your own custom animations. The show() and hide() methods, when used without parameters, reveal and conceal elements from the display immediately, without any animation. You can perform animated versions of the hiding and…

Another queue-oriented activity you might want to perform is to add a delay between the executions of queued functions. The delay() method enables that. Method syntax: delay delay(duration[, queueName]) Adds a delay to all unexecuted functions in the named queue. Parameters duration (Number|String) The delay duration in milliseconds, or one of the strings “fast”, “normal”, or “slow”,…

Queuing up functions for execution is not all that useful unless you can somehow cause the execution of the functions to actually occur. Enter the dequeue() method. Method syntax: dequeue dequeue([name]) Removes the foremost function in the named queue for each element in the jQuery object and executes it for each element. Parameters name (String) The name…

Queuing up animations for serial execution is an obvious use for function queues. But is there a real benefit? After all, the animation methods allow for completion callbacks, so why not just fire off the next animation in the callback of the previous animation? Adding functions to a queue Let’s review the code fragment of listing…

You’ve seen how multiple properties of elements can be animated using a single animation method, but we haven’t examined how animations behave when you call simultaneous animation methods. In this section we’ll examine how animations behave in concert with each other. Simultaneous animations What would you expect to happen if you were to execute the…

Let’s say that you want to conspicuously animate the removal of an element from the display. The animation you’ll use to accomplish this will make the element appear to drop off the page, disappearing from the display as it does so. If you think about it for a moment, you can figure out that by…

In the previous section you saw how to easily integrate new easing functions by using third-party libraries. Creating your own animations is also a surprisingly simple matter. jQuery exposes the animate() method, which allows you to apply your own custom animated effects to a set of elements. Let’s take a look at its syntax, including the parameters’…

In the previous section you learned about the easing parameter and the easing functions available in jQuery: linear and swing. The number of core effects supplied with jQuery is purposely kept small, in order to keep jQuery’s core footprint to a minimum. But this doesn’t mean you can’t employ third-party libraries to gain access to more easings (once again you…

Another set of effects that hide or show elements—slideDown() and slideUp()—also works in a similar manner to the hide() and show() effects, except that the elements appear to slide down from their tops when being revealed and to slide up into their tops when being hidden, and without parameters they are animated. Like the previous set of effects, the slide effects…

Back in lesson 2, we introduced the concept of lab pages to help you experiment with using jQuery selectors. For this lesson, we’ve set up a jQuery Effects Lab Page for exploring the operation of the jQuery effects in the file lesson-8/lab.effects.html. Loading this page into your browser results in the display shown in figure 8.2. Figure…