Jquery – Hide – Show – Fade – Slide

HIDE / SHOW

$(".dog").show();
$(".dog").hide();

FADE

$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$('#div3').fadeOut("slow");



$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);

SLIDE

$("#panel").slideDown();
$("#panel").slideUp();
$("#panel").slideToggle();

$("#panel").toggle();

Slide Left/Right (You need Jquery UI)


$('#example1').hide("slide", { direction: "right" }, 1000);


Delay
$("#step2").delay(700).show("slide", { direction: "right" }, 500);


Easings in and out


$(this).animate({height: "show"}, 600, "easeOutBounce");//opens only
$(this).animate({height: "hide"}, 600, "easeOutBounce");//hides only

Can replace this boring version!

$(this).appendTo($('#ticker')).slideDown();