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()方法，所以不想在這里使用插件。 我從“ 關於我們”頁面上學到了啟發。

Answer 1

現場演示

您需要准備好一個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>