animate like gmail login

animate like gmail login

by Abhay Singh

HTML

<div class="maindiv">
<div id="movediv">
<div class="section">
username
</div>
<div class="section">
password
</div>
</div>
</div>
<br><br>
<div id="next">
NEXT
</div>

CSS

.maindiv {
  width:500px;
  overflow:hidden;
  white-space:nowrap;
}
.section {
  width:500px;
  display:inline-block;
}
#movediv {
  width:1000px;
  position:relative;
}

JavaScript

$('#next').click(function() {
$('#movediv').animate({
    left: "-500px"
  }, 300, function() {
    
  });
});