這段代碼有什麼問題？

我正在嘗試使用jquery動畫功能來爲盒子添加動畫，但是這個簡單的代碼似乎讓我不高興。我不確定我誤認了什麼？有時類似的代碼會很完美，有時候看起來很困難。這段代碼有什麼問題？

<!doctype html> 

    <html> 
     <head> 
      <script src="jquery.js"> 
      </script> 

      <style> 
       #main{ 
        clear:both; 
       } 
       #boxes{ 
        position:absolute; 
        width:75%; 
       } 
       #box1, #box2, #box3{ 
        position:relative; 
        width:200px; 
        height:200px; 
        background-color:#FFD600; 
        margin:10px; 
       } 
       #buttons{ 
        float:right; 
       } 
       input{ 
        display:block; 
        width:150px; 
       } 
      </style> 

      <script> 
      $('document').ready(function(){ 
       $("#left").bind('click', function(){ 
        console.log('Left'); 
        $('#box1').animate({x:"+=20px"}); 
       }); 

      }); 
      </script> 

     </head> 
     <body> 
      <div id="main"> 
       <div id="boxes"> 
        <div id="box1"> 

        </div> 

        <div id="box2"> 

        </div> 

        <div id="box3"> 

        </div> 
       </div> 

       <div id="buttons"> 
         <input type="button" value="Left" id="left"> 
        <input type="button" value="Right" id="right"> 
        <input type="button" value="Top" id="top"> 
        <input type="button" value="Bottom" id="bottom"> 
        <input type="button" value="Height" id="height"> 
        <input type="button" value="Width" id="width"> 
       </div> 
      </div> 
     </body> 
    </html>

Try it上的jsfiddle。

來源

2011-12-02 Sandeep

什麼問題？ – icktoofay

是否應該將其移至http://codereview.stackexchange.com/？ –

沒關係，如果你可以將它移動到coderview ... – Sandeep

x不是CSS屬性。嘗試left：

$('#box1').animate({left:"+=20px"});

上的jsfiddle Try it。

來源

2011-12-02 04:48:06 icktoofay

非常感謝... – Sandeep

x: "+=20px"

應該是：

left: "+=20px"

JSFIDDLE DEMO

來源

2011-12-02 04:47:55 RightSaidFred

非常感謝。我在控制檯中看不到這個錯誤？ JSFiddle展示了這一點。非常有幫助 – Sandeep

@瘋狂36：不客氣。是的，你不會得到一個錯誤。它只是默默地失敗。 – RightSaidFred

改變這一行：

$('#box1').animate({x:"+=20px"});

這樣：

$('#box1').animate({left:"+=20px"});

CSS中的位置是top和left，不是x和y。作品在這裏：http://jsfiddle.net/jfriend00/47vMV/。

來源

2011-12-02 04:49:56 jfriend00

試試這個它完美的作品：

$("#left").click(function(){ 
console.log('Left'); 
$('#box1').animate({left: '+=50'});

}）;

來源

2011-12-02 04:59:41

這段代碼有什麼問題？

回答

相關問題