Mindblown: a blog about philosophy.
-
Animations and queuing
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…
-
A custom drop animation
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…
-
Creating custom animations
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’…
-
Adding more easing functions to jQuery
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…
-
Sliding elements up and down
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…
-
Introducing the jQuery Effects Lab Page
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…
-
Animating the display state of elements
Human cognitive ability being what it is, making items pop into and out of existence instantaneously can be jarring. If you blink at the wrong moment, you could miss the transition, leaving you to wonder, “What just happened?” Gradual transitions of a short duration help you know what’s changing and how you got from one…
-
Showing and hiding elements
Perhaps the most common type of dynamic effect you’ll want to perform on one or more elements is the simple act of showing or hiding them. We’ll get to more fancy animations in a bit, but sometimes you just want to keep it simple and pop elements into existence or make them instantly vanish! The…
-
Energizing pages with animations and effects
This lesson covers In the early days of the web, the capabilities afforded to page authors were severely limited, not only by the minimal APIs but also by the sluggishness of scripting engines and low-powered systems. The idea of using these limited abilities for animation and effects was laughable, and for years the only animation…
-
Conclusion
Building upon the jQuery knowledge that you’ve gained so far, this lesson introduced you to the world of event handling. You learned that there are vexing challenges to implementing event handling in web pages, but such handling is essential for creating pages in interactive web applications. Not insignificant among those challenges is the fact that…
Got any book recommendations?