jquery - if语句改变页面上的css位置

Question

我试图在这个网站上复制城市的东西

http://www.blueacorn.com/

我只是想让建筑物倒塌的东西现在开始工作，但我遇到了一些麻烦。我有代码可以使用此代码将 div 从视口外部下降到视口中。

第一部分附加到一个 ID 为 #clicky 的按钮

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

第二部分是实际降低 div 的函数。

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

现在我不希望人们不断点击按钮并让它进一步下降。我想要这样当他们单击另一个按钮时，不同的 div 会下降，而之前的 div 会上升，就像在城市中一样。所以我想放一个 if 语句，但我不确定这是否可能。到目前为止我的代码是这样的。它也不起作用哈哈。

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

}

我相当肯定语法是完全错误的。我能做些什么来解决这个问题？

Answer 1

两件事...... 1. 只使用一个静态的最终顶部值，它更简单。2.当按钮被点击时，可以解除clicky元素的绑定，使其不再可点击。

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

Answer 2

有几种方法可以做到这一点。

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