javascript - jQuery Animate won't move for me -

at wit's end here. sorry if similar question other 20 i've looked at, i've tried , can't figure out why mine won't work.

    <style>       .block {       position:relative;       background-color:#abc;       left:50px;       width:500px;       height:90px;       margin:5px;       overflow:hidden;        }      </style>      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>     <script>     $(".wth").click(function(){         $(".block").animate({left: "500px"}, 1500);         });    </script> 

and html:

 <button class="wth">move it!</button>  <div class="block" style="border:#333 3px solid;">    lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc vulputate egestas consectetur. donec ornare, orci in dapibus euismod, libero ante viverra ante, pretium felis odio quis eros.   <div style="clear:both;"></div>   </div> 

just trying learn use .animate() method jquery, not looking use plugin here. inspired learn about us page.

live demo

you need dom ready listen dom ready manipulated, means elements inside collection, ready accessed.

http://api.jquery.com/ready/

$(function(){ // document ready shorthand      $(".wth").click(function(){         $(".block").animate({left: 500}, 1500);      });  });