Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://letteringjs.com/js/jquery.lettering-0.6.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
</style>
</head>
<body>
  <h1><span>W</span><span>A</span><span>V</span><span>E</span><span>S</span><span> </span><span>A</span><span>R</span><span>E</span><span> </span><span>S</span><span>O</span><span> </span><span>C</span><span>O</span><span>O</span><span>L</span><span>!</span></h1>
</body>
</html>
 
$(function() {
  var i;
  //$('h1').lettering();
  $("h1 span").css("position", "relative");
  $("h1").hover(function(){
    i = 0;
    $(this).find("span").each(function(){
      $(this).delay(i*100).animate({'top': '10px'},100);
        i++;
    });
  }, function(){
        i = 0;
        $(this).find("span").each(function(){
            $(this).delay(i*100).animate({'top': '0px'},100);
        i++;
    });
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers