Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<link href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script><script src="//code.jquery.com/jquery-git2.js"></script><div class="container">
  <div class="button" style="margin-right:100px">
    <div class="hidden"></div>
    <div class="lefthide"></div>
  </div>
</div>
 
​
.container{
  width:500px;
  margin:0px auto;
}
.lefthide{
  background-color:rgb(57,169,23);
  width:50px;
  height:100px;
  position:relative;
  top:-100px;
  left:-50px;
  text-align:center;
    
}
.button{
    border-radius:3px;
  border:1px solid #007dc3;
  width:200px;
  height:100px;
  overflow:hidden;
}
.hidden{
    bottom:-100px;
    position:relative;
  background-color:#007dc3;
  height:100px;
  width:200px
}
​
 
$(document).ready(function(){
  
  var button1 = $('.button');
  var slideup = $('.hidden');
  var slideright = $('.lefthide');
  
  // Button 1
  button1.css("cursor", "pointer").hover(
        function(){
        slideup.stop(true).animate({
          "bottom":"0px"
        }, 150, 'linear');
        slideup.delay(100).animate({
          "left":"50px"
        },150,'linear');
        slideright.delay(550).animate({
          "left":"0px"
        }, 100, 'swing');
      }, 
    function(){
        slideright.stop(true).animate({
          "left":"-50px"
        },150,'linear');
        slideup.delay(100).animate({
          "left":"0px"
        }, 150, 'linear');
        slideup.delay(100).animate({
          "bottom":"-100px"
        },150,'linear');
      });
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers