JQuery dispone de un conjunto de métodos que permiten crear efectos de una manera muy rápida y sencilla. A continuación se muestran una serie de ejemplos basados en dos botones que permiten mostrar y ocultar una ventana con distintos métodos deJQuery.

<style>
    #caja{
        width:300px;
	height:50px;
	border: 5px dashed black;
	background: #ccc;
        text-align:center;
}
</style>
<button id="mostrar">
    Mostrar
</button>
<button id="ocultar">
    Ocultar
</button>
<div id="caja">
    Caja de prueba
</div>

SHOW - HIDE

$("#mostrar").click(function(){
    $(this).hide();
    $("#ocultar").show("normal");
    $("#caja").show("fast");
});
$("#ocultar").click(function(){
    $(this).hide();
    $("#mostrar").show("normal");
    $("#caja").hide("fast");	
});

FADEIN - FADEOUT

$("#mostrar").click(function(){
    $(this).hide();
    $("#ocultar").show("normal");
    $("#caja").fadeIn("slow");
});
$("#ocultar").click(function(){
    $(this).hide();
    $("#mostrar").show("normal");
    $("#caja").fadeOut("slow");	
});

FADETO

$("#mostrar").click(function(){
    $(this).hide();
    $("#ocultar").show("normal");
    $("#caja").fadeTo("fast",1);
});
$("#ocultar").click(function(){
    $(this).hide();
    $("#mostrar").show("normal");
    $("#caja").fadeTo("slow",0);	
});

SLIDEUP - SLIDEDOWN

$("#mostrar").click(function(){
    $(this).hide();
    $("#ocultar").show("normal");
    $("#caja").slideDown("fast");
});
$("#ocultar").click(function(){
    $(this).hide();
    $("#mostrar").show("normal");
    $("#caja").slideUp("slow");	
});

TOGGLE

Los siguientes ejemplos de tipo "toggle"  con un solo botón

<button id="todoenuno">
    Todoenuno
</button>
<div id="caja">
    Master en Javascript
</div>

toggle (básico)

$("#todoenuno").click(function(){
    $("#caja").toggle("fast");    
});

fadeToggle

$("#todoenuno").click(function(){
    $("#caja").fadeToggle("fast");    
});

slideToggle

$("#todoenuno").click(function(){
    $("#caja").slideToggle("slow");    
});

EFECTOS PERSONALIZADOS

El método animate de JQuery realiza automáticamente transiciones CSS solamente indicando las propiedades directamente.

<button id="todoenuno">
    Todoenuno
</button>
<button id="animacion">
    Animación
</button>
<div id="caja">
    Master en Javascript
</div>

$("#todoenuno").click(function(){
    $("#caja").slideToggle("fast");
});
$("#animacion").click(function(){
    $("#caja")
	.animate({
		marginLeft: "500px",
		fontSize: "30px",
		height: "110px",
	},"slow")
	.animate({
		borderRadius: "150px",
		marginTop: "80px" 
	},"slow")
	.animate({
		borderRadius: "0px",
		marginLeft: "0px"
	},"slow");
});

Los métodos de animación permiten añadir callbacks que ayudan en los casos en los que se necesita añadir otra acción una vez la animación ha cargado completamente.

Añadiendo callback manteniendo el ejemplo anterior:

$("#todoenuno").click(function(){
		//$("#caja").toggle("fast");
		//$("#caja").fadeToggle("fast");
		$("#caja").slideToggle("fast",function(){
			//se añade un callback si queremos que se ejecute justo una vez acabada la animación
			//$(this).text("Hello");
		});
	});
	$("#animacion").click(function(){
		$("#caja")
			.animate({
				marginLeft: "500px",
				fontSize: "30px",
				height: "110px",
			},"slow")
			.animate({
				borderRadius: "150px",
				marginTop: "80px" 
			},"slow")
			.animate({
				borderRadius: "0px",
				marginLeft: "0px"
			},"slow",function(){
				//se añade un callback si queremos que se ejecute justo una vez acabada la animación
				$(this).text("Animación completada");
			});
	});