Tutorial #26 del curso de jquery, en este tutorial damos por finalizado la parte de efectos viendo las animaciones, como este metodo puede ser bastante interesante utilizarlo ya que nos permite perzonalizar los efectos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efectos -animación</title>
<style type="text/css">
#cuadro{
width: 400px;
height: 400px;
background-color: #26859E;
position: absolute;
}
</style>
</head>
<button id="izquierda">mover a la izquierda</button><button id="derecha">mover a la derecha</button>
<div id="cuadro"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#izquierda').click(function(event) {
/*$('#cuadro').animate({width: 800, height: 600}, 3000);
$('#cuadro').animate({width: 200, height: 100}, 2000);
$('#cuadro').animate({opacity: 0.4}, 2000);*/
$('#cuadro').animate({"left": "-=50px"}, "slow");
});
$('#derecha').click(function(event) {
/*$('#cuadro').animate({width: 800, height: 600}, 3000);
$('#cuadro').animate({width: 200, height: 100}, 2000);
$('#cuadro').animate({opacity: 0.4}, 2000);*/
$('#cuadro').animate({"left": "+=50px"}, "slow");
});
});
</script>
</body>
</html>