需要加载更多按钮才能将所有元素向下移动

时间:2014-09-14 20:20:30

标签: javascript jquery html css

我需要为我的网站上的Instagram Feed添加更多按钮,但要加载更多我计划增加该部分的高度并将页面的其余部分向下移动...我试过这个

<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)为了使这项工作成为当前我在开始时收到一个错误,说明函数未定义。

有人能给我一些关于如何解决这个问题的指示吗?

1 个答案:

答案 0 :(得分:0)

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() {
    ....
}));