jquery基礎（十）

Built-in Effects

Frequently used effects are built into jQuery as methods:

$.fn.show

Show the selected element.

$.fn.hide

Hide the selected elements.

$.fn.fadeIn

Animate the opacity of the selected elements to 100%.

$.fn.fadeOut

Animate the opacity of the selected elements to 0%.

$.fn.slideDown

Display the selected elements with a vertical sliding motion.

$.fn.slideUp

Hide the selected elements with a vertical sliding motion.

$.fn.slideToggle

Show or hide the selected elements with a vertical sliding motion, depending on whether the elements are currently visible.

Example 6.1. A basic use of a built-in effect

$('h1').show();

Changing the Duration of Built-in Effects

With the exception of $.fn.show and $.fn.hide, all of the built-in methods are animated over the course of 400ms by default. Changing the duration of an effect is simple.

Example 6.2. Setting the duration of an effect

$('h1').fadeIn(300);      // fade in over 300ms
$('h1').fadeOut('slow');  // using a built-in speed definition

jQuery.fx.speeds

jQuery has an object at jQuery.fx.speeds that contains the default speed, as well as settings for"slow" and "fast".

speeds: {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
}

It is possible to override or add to this object. For example, you may want to change the default duration of effects, or you may want to create your own effects speed.

Example 6.3. Augmenting jQuery.fx.speeds with custom speed definitions

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

Doing Something when an Effect is Done

Often, you'll want to run some code once an animation is done -- if you run it before the animation is done, it may affect the quality of the animation, or it may remove elements that are part of the animation. [Definition: Callback functions provide a way to register your interest in an event that will happen in the future.] In this case, the event we'll be responding to is the conclusion of the animation. Inside of the callback function, the keyword this refers to the element that the effect was called on; as we did inside of event handler functions, we can turn it into a jQuery object via$(this).

Example 6.4. Running code when an animation is complete

$('div.old').fadeOut(300, function() { $(this).remove(); }); 

Note that if your selection doesn't return any elements, your callback will never run! You can solve this problem by testing whether your selection returned any elements; if not, you can just run the callback immediately.

Example 6.5. Run a callback even if there were no elements to animate

var $thing = $('#nonexistent');

var cb = function() {
    console.log('done!');
};

if ($thing.length) {
    $thing.fadeIn(300, cb);
} else {
    cb();
}

Custom Effects with $.fn.animate

jQuery makes it possible to animate arbitrary CSS properties via the $.fn.animate method. The$.fn.animate method lets you animate to a set value, or to a value relative to the current value.

Example 6.6. Custom effects with $.fn.animate

$('div.funtimes').animate(
    {
        left : "+=50",
        opacity : 0.25
    }, 
    300, // duration
    function() { console.log('done!'); // calback
});

Note

Color-related properties cannot be animated with $.fn.animate using jQuery out of the box. Color animations can easily be accomplished by including the color plugin. We'll discuss using plugins later in the book.

Easing

[Definition: Easing describes the manner in which an effect occurs -- whether the rate of change is steady, or varies over the duration of the animation.] jQuery includes only two methods of easing: swing and linear. If you want more natural transitions in your animations, various easing plugins are available.

As of jQuery 1.4, it is possible to do per-property easing when using the $.fn.animate method.

Example 6.7. Per-property easing

$('div.funtimes').animate(
    {
        left : [ "+=50", "swing" ],
        opacity : [ 0.25, "linear" ]
    },
    300
);

Managing Effects

jQuery provides several tools for managing animations.

$.fn.stop

Stop currently running animations on the selected elements.

$.fn.delay

Wait the specified number of milliseconds before running the next animation.

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off

If this value is true, there will be no transition for animations; elements will immediately be set to the target final state instead. This can be especially useful when dealing with older browsers; you also may want to provide the option to your users.