JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.3.1 CSS Animations

// Query the inline style string of the element e with either of these: s = e.getAttribute("style"); s =;

16.3.1 CSS Animations

One of the most common uses of scripted CSS is to produce animated visual effects. This can be achieved by using setTimeout() or setInterval() (see §14.1 ) to repeatedly invoke a function that alters the inline style of an element. Example 16-3 demonstrates with two functions shake() and fadeOut(). shake() quickly moves or “shakes” an element side to side. It might be used to grab the user’s attention if he enters invalid data, for example. fadeOut() decreases the opacity of an element over a specified amount of time (500 milliseconds, by default), causing it to fade out and vanish.

Example 16-3. CSS animations

// Convert element e to relative positioning and "shake" it left and right. // The first argument can be an element object or the id of an element. // If a function is passed as the second argument, it will be invoked // with e as an argument when the animation is complete. // The 3rd argument specifies how far to shake e. The default is 5 pixels. // The 4th argument specifies how long to shake for. The default is 500 ms.

16.3 Scripting Inline Styles | 433

function shake(e, oncomplete, distance, time) { // Handle arguments if (typeof e === "string") e = document.getElementById(e); if (!time) time = 500; if (!distance) distance = 5;

var originalStyle =; // Save the original style of e = "relative"; // Make e relatively positioned var start = (new Date()).getTime(); // Note the animation start time animate(); // Start the animation

// This function checks the elapsed time and updates the position of e. // If the animation is complete, it restores e to its original state. // Otherwise, it updates e's position and schedules itself to run again. function animate() {

var now = (new Date()).getTime(); // Get current time var elapsed = now-start; // How long since we started var fraction = elapsed/time; // What fraction of total time?

if (fraction < 1) { // If the animation is not yet complete // Compute the x position of e as a function of animation // completion fraction. We use a sinusoidal function, and multiply // the completion fraction by 4pi, so that it shakes back and // forth twice. var x = distance * Math.sin(fraction*4*Math.PI); = x + "px";

// Try to run again in 25ms or at the end of the total time. // We're aiming for a smooth 40 frames/second animation. setTimeout(animate, Math.min(25, time-elapsed));


else { // Otherwise, the animation is complete = originalStyle // Restore the original style if (oncomplete) oncomplete(e); // Invoke completion callback

} } }

// Fade e from fully opaque to fully transparent over time milliseconds. // Assume that e is fully opaque when this function is invoked. // oncomplete is an optional function that will be invoked with e as its // argument when the animation is done. If time is omitted, use 500ms. // This function does not work in IE, but could be modified to animate // IE's nonstandard filter property in addition to opacity. function fadeOut(e, oncomplete, time) {

if (typeof e === "string") e = document.getElementById(e); if (!time) time = 500;

// We use Math.sqrt as a simple "easing function" to make the animation // subtly nonlinear: it fades quickly at first and then slows down some. var ease = Math.sqrt;

var start = (new Date()).getTime(); // Note the animation start time animate(); // And start animating

function animate() { var elapsed = (new Date()).getTime()-start; // elapsed time

var fraction = elapsed/time; // As a fraction of total

if (fraction < 1) { // If the animation is not yet complete

var opacity = 1 - ease(fraction); // Compute element opacity = String(opacity); // Set it on e

setTimeout(animate, // Schedule another frame

Math.min(25, time-elapsed));


else { // Otherwise, we're done = "0"; // Make e fully transparent if (oncomplete) oncomplete(e); // Invoke completion callback } } }

Both shake() and fadeOut() accept an optional callback function as their second argument. If specified, this function will be invoked when the animation is complete. The element that was animated is passed as an argument to the callback. The following HTML creates a button that, when clicked, shakes from side to side and then fades away:

Shake and Fade

Note that the shake() and fadeOut() example functions are quite similar to each other, and both can serve as templates for similar animations of other CSS properties. Client-side libraries, such as jQuery usually support pre-defined visual effects, however, so you may never actually need to write an animation function like shake(), unless you want to create a particularly complex visual effect. One early and noteworthy effects library is Scriptaculous, which is designed for use with the Prototype framework. Visit and to learn more.

The CSS3 Transitions module defines a way to specify animated effects in stylesheets, obviating the need for any scripting. Instead of defining a function like fadeOut(), for example, you might use CSS like this:

.fadeable { transition: opacity .5s ease-in }

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1