jQuery Animation, manquant: après l'ID de propriété

Question

J'ai un fichier HTML qui a un ensemble de divs avec la classe "block". Je voudrais que ceux-ci glissent en place quand la page se charge, et j'essaie d'utiliser la fonction animée de jQuery pour cela. Cependant, je suis un noob total à jQuery, et je reçois un bogue que les tutoriels au the jQuery site n'aident pas.

Voici mon code:

$(document).ready(function() { 
    $(".block").animate({margin-top: "1%"}, {duration: 200, queue: true}); 
}); 

Le style .block ressemble à ceci:

div.block { 
    width: 18%; 
    float: left; 
    margin: 1%; 
    margin-top: -10%; 
    min-height: 120px; 
} 

Le message d'erreur que je reçois dans Firebug est: ": manquant après id propriété". Alors, comment est-ce que je ne comprends pas cela, et serait la bonne façon d'obtenir un ensemble de blocs à "glisser" pour placer? (J'aimerais idéalement qu'ils glissent l'un après l'autre en succession rapide.)

Voici a link to the page I'm working on au cas où vous auriez besoin de le voir. C'est avec le JS désactivé afin de voir où les blocs devraient apparaître après l'animation.

Answer 1

margin-top n'est pas un identifiant valide par lui-même en JavaScript, donc il doit être entre guillemets, comme ceci:

$(document).ready(function() { 
    $(".block").animate({'margin-top': "1%"}, {duration: 200, queue: true}); 
}); 

Ou jQuery vous permet d'utiliser casquettes pour désigner un -, comme ceci:

$(document).ready(function() { 
    $(".block").animate({marginTop: "1%"}, {duration: 200, queue: true}); 
}); 

En interne, jQuery just converts "margin-top" back to "marginTop". Comme une suggestion globale, puisque la valeur par défaut est de mettre en file d'attente, vous pouvez simplifier votre code à ceci:

$(function() { 
    $(".block").animate({'margin-top': "1%"}, 200); 
});