Slide Sign in and Signup page

by Faisal Khan Janjua

HTML

<div class="main">
  <div class="w200">
    <div class="Div2 opacity_0">Click Here<br>This is DIV 2</div>
    <div class="Div1">Click Here<br>This is DIV 1</div>
  </div>
</div>

CSS

.main{
  width:500px;
  height:300px;
  background:#CCC;
  margin: 20px auto;
  position:relative;
  overflow:hidden;
}
.w200{
  width:200%;
  height:100%;
  transition:all ease-in-out .2s;
}
.Div1, .Div2 {
    opacity:1;
    color:#FFF;
    height: 100%;
    cursor:pointer;
    text-align:center;
    position:absolute;
    transition:all ease-in-out .2s;
}
.Div1{
  width:100%;
  background:#a99;
}
.Div2{
  width:100%;
  background:#99f;
  margin-left:100%;
}
.opacity_0{
  opacity:0;
}

JavaScript

$('.Div1').click(function() {
    $('.Div1').animate({
        }, 'fast', 'linear', function() {
        	$(".w200").css({'margin-left':'-100%'});
        	$(this).addClass("opacity_0");
        	$('.Div2').removeClass("opacity_0");
        });
});

$('.Div2').click(function() {
    $('.Div2').animate({
        }, 'fast', 'linear', function() {
        	$(".w200").css({'margin-left':'0%'});
        	$(this).addClass("opacity_0");
        	$('.Div1').removeClass("opacity_0");
        });
});