Movendo elementos com animate no jQuery.

by Yure Pereira

HTML

<div id="box"></div>
<button type="button" id="move-left">Mover Left</button>
<button type="button" id="move-right">Mover Right</button>

CSS

#box {
  width: 200px;
  height: 200px;
  background-color: #f00;
  position: relative;//Não esqueça de colocar a posição do elemento como relativa ao elemento onde ele está contido, nesse caso serio o <body>.
}

JavaScript

$(function() {

	var box = $('#box');
	$('#move-left').click(function() {
  
    box.animate({
      left: "100px",
    }, 1000);//Velocidade.
  
  });
  
 	$('#move-right').click(function() {
  
    box.animate({
      left: "0",
    }, 1000);//Velocidade.
  
  });

});