javascript - 如何为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);
        });
});