Movendo página inteira com Animate jQuery

by Yure Pereira

HTML

<div id="page">
  <div id="tela-1" class="telas">Tela 1</div>
  <div id="tela-2" class="telas">Tela 2</div>
  <div id="tela-3" class="telas">Tela 3</div>
  <div id="tela-4" class="telas">Tela 4</div>
</div>

CSS

#page {
  width: 1000px;
  height: 1000px;
  position: relative;
}
.telas {
  position: relative;
  width: 500px;
  height: 500px;
  float: left;
}
#tela-1 {
  background: #888;
}
#tela-2 {
  background: #444;
}
#tela-3 {
  background: #444;
}
#tela-4 {
  background: #888;
}

JavaScript

$(function() {

	var page = $('#page');
	$('#tela-1').click(function() {
  
    page.animate({
      left: "-500px",
    }, 2000);//Velocidade.
  
  });
  
	$('#tela-2').click(function() {
  
    page.animate({
      left: "0px",
    }, 2000);//Velocidade.
  
  });

});