jQuery Animate 不会为我移动答案

【问题标题】：jQuery Animate won't move for mejQuery Animate 不会为我移动
【发布时间】：2013-05-02 19:02:03
【问题描述】：

到此为止。抱歉，如果这与我看过的其他 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 页面受到启发。

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

LIVE DEMO

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

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

$(function(){ // DOCUMENT ready shorthand

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

});

【讨论】：

如果这个答案没有任何意义，那么您就没有将听众附加到任何东西上。使用这个 $(function(){});方法，您正在绑定侦听器，同样准备好文档，但通常认为这种方式更好。仅供参考，这是给 OP 的。显然 roXon 知道这一点
SMH。我添加了速记并且它起作用了。我尝试在发布问题之前添加完整的$(document).ready() 位，并在它不起作用时将其删除。谢谢罗克森！
@ckpepper02 不客气！希望我们设法解释了这个问题；）

【解决方案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>

【讨论】：

谢谢@Connor。我之前试过了，但我一定是打错了。 SMH。