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>

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

Answer 1

LIVE DEMO

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

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

$(function(){ // DOCUMENT ready shorthand

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

});

Answer 2

尝试这个，

    <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>
    $(document).ready(function(){
        $(this).on('click', 'button.wth', function(){
            $('.block').animate({
                left: '250px',
            });
        });
    });
   </script>

……

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