jQuery Анимация, отсутствует: после свойства id

Question

У меня есть HTML-файл, который имеет набор div с классом «block».

Я хотел бы, чтобы они скользят на место, когда страница загружается, и я пытаюсь использовать функцию анимации jQuery для этого. Тем не менее, я полный noob для jQuery, и я получаю ошибку, с которой учебники на the jQuery site не помогают.

Вот мой код:

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

Стиль по .block выглядит следующим образом:

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

Сообщение об ошибке я получаю в Firebug это: "отсутствует: после того, как собственность ид".

Итак, как я ошибаюсь в этом, и будет ли правильный способ получить набор блоков для «скольжения»? (Мне идеально хотелось бы, чтобы они скользят по одному за раз в быстрой последовательности.)

Вот a link to the page I'm working on, если вам нужно его увидеть. Это происходит при выключенном JS, поэтому вы видите, где должны появиться блоки после анимации.

Answer 1

margin-top не является допустимым идентификатором сам по себе в JavaScript, поэтому он должен быть в кавычках, например:

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

Или JQuery позволяет использовать заглавные буквы для обозначения -, как это:

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

Внутренний, jQuery just converts "margin-top" back to "marginTop". В качестве общего предложения, поскольку по умолчанию для очереди, вы можете упростить свой код до этого:

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