jQuery: 8 Efectos animados básicos

A continuación un total de 8 efectos animados de jQuery. En este caso hemos empleado una serie de divs en forma de cajas de colores para aplicarles los efectos animados más habituales (mostrar, ocultar, diapositivas, aparecer, desaparecer, opacidad…) de jQuery.

 
$(function() {

	$('#a1').click(function() {
		$('#box1').fadeIn(1500);
	});
	
	$('#a2').click(function() {
		$('#box2').fadeOut(1500);
	});
	
	$('#a3').click(function() {
		$('#box3').show(1500);
	});
	
	$('#a4').click(function() {
		$('#box4').hide(1500);
	});
	
	$('#a5').click(function() {
		$('#box5').slideDown(1500);
	});
	
	$('#a6').click(function() {
		$('#box6').slideUp(1500);
	});
	
	$('#a7').click(function() {
		$('#box7').slideToggle(1500);
	});
	
	$('#a8').click(function() {
		$('#box8').fadeTo('slow', 0.5, function() {	});
	});

});

• FADE IN

• FADE OUT

• SHOW

• HIDE

• SLIDE DOWN

• SLIDE UP

• SLIDE TOOGLE

• FADE TO