Если инструкция для изменения позиции css на странице

Я пытаюсь дублировать город на этом веб-сайте

http://www.blueacorn.com/

Я просто пытаюсь заставить здания падать вниз, чтобы работать прямо сейчас, но у меня проблемы. У меня есть код, работающий над тем, чтобы привести div вниз из окна просмотра вниз в порт представления с помощью этого кода.

Эта первая часть прикреплена к кнопке с идентификатором #clicky

$('document').ready(function() {
 $('#clicky').bind('click', slideIt);
});

Эта вторая часть - это функция, которая фактически сводит div вниз.

function slideIt() {
 $('#thing').animate(
 { top: "+=600px"}, 3000);
};

Теперь я не хочу, чтобы люди постоянно нажимали кнопку и спускались дальше. Я хочу, чтобы, когда они нажимают другую кнопку, разные divs спускаются, а те, которые были там, доходят, как в городе. Поэтому я думал поставить инструкцию if, но я не уверен, что это возможно. Код, который у меня есть до сих пор, таков. Его также не работает ха-ха.

if ($('#thing').css('top') === '600px') {
 function slideIt() {
 $('#thing').animate(
 { top: "-=600px"}, 3000);
};

}

Я довольно уверен, что синтаксис совершенно неверен. Что я могу сделать, чтобы исправить это?

2 ответа

Две вещи... 1. просто используйте статическое конечное верхнее значение, это проще. 2. Когда кнопка нажата, вы можете отвязать элемент clicky, чтобы он больше не зависал.

function slideIt() {
 $('#clicky').unbind('click');
 $('#thing').animate(
 { top: "0px"}, 3000);
};


Есть несколько способов сделать это.

function slideIt() {
 if($('#thing').hasClass('running')) {
 return;
 } 
 $('#thing').addClass('running').animate(
 { top: "+=600px"}, 3000);
};

licensed under cc by-sa 3.0 with attribution.