Question

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

http://www.blueacorn.com/

我只是想让建筑物倒塌现在正在工作，但我遇到了一些麻烦。我有代码正在使用此代码将视口外部的div降低到视口中。

第一部分附加到ID为#clicky

的按钮

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

第二部分实际上是将div降低的功能。

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

现在我不希望人们不断点击按钮并让它进一步下降。我想要它，以便当他们点击另一个按钮时，不同的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);
};

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

2 个答案: