Javascript 需要“加载更多”按钮将所有元素向下移动页面

我需要在我的网站上为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%

我要求的是： 实现这一点的一个更有效的方法是，JavaScript不可能是实现这一点的最佳方法 b为了使这项工作，目前我得到一个错误的开始说，功能是未定义的

---

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

一个简单的解决办法是只需向所有这些元素添加一个相同的类。i、 e

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

b如果jQuery设置错误，请执行以下操作：

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

不是

---

进行了建议的更改，停止了所有错误，但现在按钮仍然不起任何作用。。。有什么想法吗？

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

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