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 src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <meta charset=utf-8 />
    <title>Hey Test</title>
    </head>
    <body>
      <form id="form">
<div id="signup">
      <input required="required" type="email" name="email" id="email" placeholder="me@email.com" tabindex="1">
      <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
    </div>
      </form>
  
<script type="text/javascript">
$(document).ready(function(){
  $("#email").focus(function(){
    $(this).animate({
      opacity: 1.0,
      width: '+=240px'
    }, 350, function(){
      // callback method
    });
    
    // display submit button
    $("#submitbtn").fadeIn(350);
  });
  
  $("#form").on("submit", function(e){
    if ($("#email").val())  $("#signup").fadeOut(220);
    return false;
  });
  
  $("#email").blur(function(){
    $("#email").animate({
      opacity: 0.75,
      width: '-=240px'
    }, 500, function(){
      // callback method
    });
    
    // hide submit button
    $("#submitbtn").fadeOut(400);
  });
});
</script>
    </body>
    </html>
​
Output

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

Dismiss x
public
Bin info
dmi3ypro
0viewers