javascript - 需要加载更多按钮以将所有元素向下移动页面

Question

我需要在我的网站上为 Instagram 提要制作一个加载更多按钮，但要加载更多，我计划增加该部分的高度并将页面的其余部分向下移动......我已经尝试过了

<script>
$(document.ready(function(){

$('#movedown').click(function(){
    $('.galleryback').animate({
        'minHeight' : "+= 50%"
    });
    $('.insta').animate({
        'maxHeight' : "+= 50%"
    });

    $('.salonback').animate({
        'top' : "+= 50%"
    });
    $('.our').animate({
        'top' : "+= 50%"
    });
    $('.salon').animate({
        'top' : "+= 50%"
    });
    $('.salonunderlineleft').animate({
        'top' : "+= 50%"
    });
    $('.salonunderlineright').animate({
        'top' : "+= 50%"
    });
    $('.salonscissors').animate({
        'top' : "+= 50%"
    });
    $('.salonmaincopy').animate({
        'top' : "+= 50%"
    });
    $('.salontourbutton').animate({
        'top' : "+= 50%"
    });
    $('.salonmirrorimage').animate({
        'top' : "+= 50%"
    });
    $('.mapback').animate({
        'top' : "+= 50%"
    });
    $('.organic33title').animate({
        'top' : "+= 50%"
    });
    $('.organic33underline').animate({
        'top' : "+= 50%"
    });
    $('.organic33address').animate({
        'top' : "+= 50%"
    });
    $('.mapitself').animate({
        'top' : "+= 50%"
    });
    $('.mapoverlay').animate({
        'top' : "+= 50%"
    });
    $('.contactback').animate({
        'top' : "+= 50%"
    });
    $('.howto').animate({
        'top' : "+= 50%"
    });
    $('.contactus').animate({
        'top' : "+= 50%"
    });
    $('.contactunderlineleft').animate({
        'top' : "+= 50%"
    });
    $('.contactscissors').animate({
        'top' : "+= 50%"
    });
    $('.contactunderlineright').animate({
        'top' : "+= 50%"
    });
    $('.contactformcol1').animate({
        'top' : "+= 50%"
    });
    $('.contactformcol2').animate({
        'top' : "+= 50%"
    });
    $('.sendbutton').animate({
        'top' : "+= 50%"
    });
    $('.footerback').animate({
        'top' : "+= 50%"
    });
    $('.footerfbicon').animate({
        'top' : "+= 50%"
    });
    $('.footertwttricon').animate({
        'top' : "+= 50%"
    });
    $('.footermidtext').animate({
        'top' : "+= 50%"
    });
    $('.footercopyright').animate({
        'top' : "+= 50%"
    });
});
}));

</script>

希望您明白我的意思，我想点击按钮，增加一个部分的最小高度，另一个部分的最大高度，然后将所有其他元素向下移动 50%...

我的要求是:a) 一种更有效的方法来实现这一点，JavaScript 不是最好的方法b) 为了使这项工作像目前一样工作，我在开始时收到一条错误消息，说该函数未定义。

谁能给我一些关于如何解决这个问题的建议？

Answer 1

a) 一个简单的解决方法是向所有这些相同的元素添加一个类。即

<div class="salonback commonClass"></div>
<div class="our commonClass"></div>
<div class="salon commonClass"></div>

等...

然后在 javaScript 中:

$('.commonClass').animate({
    'top' : "+= 50%"
});

b) 你设置了错误的 jQuery，这样做:

$(window).ready(function() {
    ....
});

不是

$(window.ready(function() {
    ....
}));