javascript - jQuery Animate 不会为我移动

Question

这里无话可说。抱歉，如果这与我看过的其他 20 个问题类似，但我已经尝试了所有方法，但无法弄清楚为什么我的问题不起作用。

    <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>

和 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, a pretium felis odio quis eros.
  <div style="clear:both;"></div>
  </div>

只是想学习使用 jQuery 的 .animate() 方法，所以不想在这里使用插件。我受到启发，从 about us 中了解到这一点页面。

Answer 1

LIVE DEMO

您需要一个 DOM 准备好监听 DOM 准备好被操作，这意味着您的元素现在在一个集合中，准备好被访问。

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

$(function(){ // DOCUMENT ready shorthand

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

});