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>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
​
</style>
</head>
<body>
​
​
        <h1>PRESS GO!</h1>
  <button id='button2'>stop!</button>
        <p><a href="http://james.padolsey.com/javascript/fun-with-jquerys-animate/">&laquo; Go back</a></p>
        <button id='button1'>Go!</button>
        
  
  
​
​
</body>
</html>
 
$(window).load(function() {
​
  
            var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sem sit amet magna convallis sed ullamcorper mi commodo.';
            $('#button1').click(function(){
                var span = $('<span class=\'text\'/>').insertAfter(this);
             
                jQuery({count:0}).animate({count:text.length}, {
                    duration: 5500,
                    step: function() {
                        span.text( text.substring(0, Math.round(this.count)) );
                    },
                    easing: 'easeOutBounce'
                });
            });  
  
            $('#button2').click(function(){             
                jQuery('span.text').stop();
            });  
  
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers