如何为div back-jquery的高度设置动画

Question

我试图显示div的某些部分，并在单击div时将其动画化为100％。 如果再次单击它，我要将其重新设置为div的初始高度。 这是我到目前为止所拥有的，但是没有用。 有人可以帮忙吗？

#mydiv {
    height:150px;
    width: 100%;
    overflow:hidden;
}

<script type="text/javascript">
    $(document).ready(function(){
        $("#mydiv").click(function(){
            $(this).animate({height: '100%'}, 300);
        }, function() {
            $(this).animate({height: '150px'}, 300);
        });
    });
</script>

Answer 1

click()不接受两个函数参数，以前有一个toggle()函数执行所需的功能，但现在已弃用该函数并将其从jQuery中删除。

由于您的用例非常简单，因此我相信这样就足够了：

$("#mydiv").click(function () {
    var $this = $(this);
    $this.animate({
        height: $this.height() == 150 ? '100%' : 150
    }, 300);
});

演示小提琴

Answer 2

这应该为您完成工作。

jQuery的：

$(document).ready(function() {
    $("#mydiv").toggle(
        function() {
            $(this).animate({height: '100%'}, 300);
        };
        function() {
            $(this).animate({height: 150}, 300);
        });
});