Отсутствует анимация jQuery: после идентификатора свойства - PullRequest
Новая
       6

Отсутствует анимация jQuery: после идентификатора свойства

2 голосов
/ 27 сентября 2010

У меня есть HTML-файл с набором элементов div с классом «блок».

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

Вот мой код: 

$(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: «отсутствует: после идентификатора свойства».

Итак, как я неправильно понял это, и был бы правильный способ получить набор блоков для "вставки" для размещения? (В идеале я бы хотел, чтобы они скользили по одному за раз подряд.)

Вот ссылка на страницу, над которой я работаю на тот случай, если вам нужно ее увидеть. Это с выключенным JS, поэтому вы видите, где должны выглядеть блоки после анимации.

1 Ответ

3 голосов
/ 27 сентября 2010

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 просто конвертирует "margin-top" обратно в "marginTop". В качестве общего предложения, поскольку по умолчанию очередь стоит, вы можете упростить свой код до следующего: 

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