Quel est le problème avec ce code?

J'essaie d'utiliser la fonction jquery animate pour animer des boîtes mais ce code simple semble me branler. Je ne suis pas sûr de ce que je me suis trompé? Parfois, le code similaire fonctionne parfaitement et parfois il semble très difficile.Quel est le problème avec ce code?

<!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 sur jsFiddle.

Source

2011-12-02 Sandeep

Quel est le problème? – icktoofay

devrait-il être déplacé à http://codereview.stackexchange.com/? –

Ça va si vous pouvez le déplacer vers coderview ... – Sandeep

x n'est pas une propriété CSS. Essayez left:

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

Try it sur jsFiddle.

Source

2011-12-02 04:48:06 icktoofay

Merci beaucoup ... – Sandeep

x: "+=20px"

devrait être:

left: "+=20px"

JSFIDDLE DEMO

Source

2011-12-02 04:47:55 RightSaidFred

Merci beaucoup. Je ne pouvais pas voir cette erreur dans la console? JSFiddle montre cela. Très utile – Sandeep

@ insane-36: De rien. Oui, vous n'obtiendrez pas d'erreur. Il échoue juste silencieusement. – RightSaidFred

Modifier cette ligne:

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

à ceci:

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

Les positions en CSS sont top et left, pas x et y. Fonctionne ici: http://jsfiddle.net/jfriend00/47vMV/.

Source

2011-12-02 04:49:56 jfriend00

Essayez cela, il fonctionne parfaitement:

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

});

Source

2011-12-02 04:59:41

Quel est le problème avec ce code?

Répondre

Questions connexes