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
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  
  <meta charset=utf-8 />
  <title>JS Bin</title>
<script>
$(document).ready(function() {
  
  
  $("a#switch.open").live('click', function() {
    $("div#layer2").animate({
      top: '0px'
    }, 1000);
    $(this).removeClass().addClass('close');
    return false;
  });
    
  $("a#switch.close").live('click', function() {
    $("div#layer2").animate({
      top: '100%'
    }, 1000);  
    $(this).removeClass().addClass('open');
    return false;
  });
});
</script>
​
<style>
  body,html,#wrapper,#layer1,#layer2 { height:100%; margin 0px; padding: 0px; }
  div#wrapper { position: relative; overflow: hidden; width: 1000px; 
    margin: 0px auto; -webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1; }
  div.slide { position: absolute; top: 0px; }
  div#layer1 { background: yellow; width: 100%; top: 0px; z-index: 1; }
  div#layer2 { background: green; width: 500px; bottom: -20px; z-index: 2; }
  a#switch { text-decoration: none; font-size: 5em; position: absolute; left: -4%; top: 50%;  }
</style>
</head>
<body>
  <div id="wrapper">
    <div class="slide" id="layer1">
      <a href="#" id="switch" class="open">>>>>></a>
      <h1>Foo yjhgjykg</h1>
    </div>
    <div class="slide" id="layer2">
      <a href="#" id="switch" class="open">>>>>></a>
      <h1>JASDJASDJASDJ</h1>
    </div>
  </div>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers