jQuery Animate不會爲我移動

智慧結束於此。對不起，如果這是一個類似的問題，我看過其他20，但我已經嘗試了一切，不知道爲什麼我的行不通。jQuery Animate不會爲我移動

<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，所以並不想在這裏使用一個插件。我受到啓發，從about us頁面瞭解到這一點。

來源

2013-05-02 ckpepper02

LIVE DEMO

你需要一個DOM準備用於偵聽的DOM準備好進行操作，這意味着現在你的元素是一個集合裏，隨時可以訪問。

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

$(function(){ // DOCUMENT ready shorthand 

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

});

來源

2013-05-02 19:04:12

如果這個答案是沒有意義的是，你不重視的傾聽任何事情。使用這個$（function（）{}）;方法，你綁定了監聽器，同樣的文件準備好了，但人們普遍認爲這種方式更好。僅供參考，這是針對OP的。顯然roXon知道這個 – 2013-05-02 19:06:14

SMH。我加了速記，它工作。我試圖在發佈問題之前添加完整的'$（document）.ready（）'位，並在無效時刪除。謝謝羅克森！ – ckpepper02 2013-05-02 19:10:00

@ ckpepper02不客氣！希望我們能夠解釋這個問題;） – 2013-05-02 19:10:37

試試這個，

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

來源

2013-05-02 19:09:50 iConnor

謝謝@Connor。我早些時候嘗試過，但我必須輸入錯誤的內容。 SMH。 – ckpepper02 2013-05-02 19:15:18

jQuery Animate不會爲我移動

回答

相關問題