jQuery Effects and Animation
Show / Hide
$("p").show();
$("p").hide();
$("p").toggle();
$("p").show(1000); // 1 second
$("p").hide("slow"); // predefined speed
$("p").toggle(500, function() {
console.log("Done!");
});
Fade
$("div").fadeIn(400);
$("div").fadeOut(400);
$("div").fadeToggle(400);
$("div").fadeTo(400, 0.5); // fade to opacity 0.5
Slide
$("div").slideDown(400);
$("div").slideUp(400);
$("div").slideToggle(400);
Custom Animation
$("div").animate({
width: "300px",
opacity: 0.5,
marginLeft: "50px"
}, 1000, function() {
console.log("Animation complete");
});
$("div").stop(); // stop current animation