/jquery-part-2

jQuery Animations

jQuery Animation Overview

  • jQuery packs in two kinds of animations: fading and vertical sliding.
  • These allow you to create simple animations while still enjoying all of the benefits of using JS such as action chaining.
  • jQuery animations using DOM manipulation of the style attribute to create animations.
  • As a result they should be used sparingly for performance reasons.

Fades

Fade In:
$("my-selector").fadeIn();
Fade Out:
$("my-selector").fadeOut();
Fade Toggle (Back and Forth):
$("my-selector").fadeToggle();

Slides

Slide Down (Show the Element):
$("my-selector").slideDown();
Slide Up (Hide the Element):
$("my-selector").slideUp();
Slide Toggle (Back and Forth):
$("my-selector").slideToggle();

Custom Animations

  • If none of the built-in animations suit you, jQuery also gives you a way to create your own animations.
  • This function will dynamically alter the style attribute in the HTML document for each property you specify:
$("my-selector").animate({
	"margin-top":"200px",
	"margin-left":"+=200px"
}, 600, "swing", function() {
	console.log("I just finished!");
});