Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <style>
.box {position:relative; width: 200px; height: 500px;}
.myDiv {position: absolute; width:100%; overflow: hidden; bottom:0px; top:10px; left:500;}
</style>
<script>
var swt = 0;
$(document).ready(function(){
  $(".b1").click(function(){
    var div=$(".myDiv");
    if(swt==0){
        div.animate({bottom:'500px', opacity:'1'}, "slow");
    //  div.animate({height:'300px', opacity:'1'},"slow");
        swt++;  
}else{
        div.animate({bottom:'300px', opacity:'1'}, "slow");
    //  div.animate({height:'0px', opacity:'1'},"slow");
        swt--;
}
  });
});
</script>
</head>
<body>
<button class="b1">Start Animation</button>
<p>posds</p>
<div class="box">
<div class="myDiv" style="background:#7549B1; width:200px;">
</div>
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers