JQuery 动画高度到 100%

Question

我想为菜单 (DIV) 从 0% 到 100% 的高度设置动画，反之亦然。 隐藏菜单 代码有效。但是，显示菜单 代码简单地淡化了高度为 100% 的元素。我希望它从 0% 增长到 100%。关于如何解决这个问题的任何想法？我是 JQuery 的新手。

JavaScript/JQuery

$(document).ready(function(e) {
    $('#mobileMenu-icon').click(function(){
        if ($('.LEFTNAV-content').hasClass("hide-menu")){
        // Show menu
            $('.LEFTNAV-content').animate({'height':'100%'}, {queue: false});
            $('.LEFTNAV-content').fadeIn('normal');
            $('.LEFTNAV-content').removeClass('hide-menu');
            $('.LEFTNAV-content').addClass('show-menu');
        }
        else{
        // hide menu
            $('.LEFTNAV-content').animate({'height':"1px"}, {queue: false});
            $('.LEFTNAV-content').fadeOut('normal');
            $('.LEFTNAV-content').removeClass('show-menu');
            $('.LEFTNAV-content').addClass('hide-menu');
        }
    })
});

CSS

.column-wrapper{ height: auto; }

.LEFTNAV-content{
    display:none; 
    overflow: hidden;
}
.hide-menu{ display: none; }

.show-menu{
    display: block;
    height: 1px;
}
.box1{
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
}
.innerBox1{
    height: auto !important;
    max-height: none !important;
    min-height: 50px;
}

HTML

<div class="column-wrapper">

    <div class="LEFTNAV-content">
        <div class="box1">
            ... menu content ...
            <div class="innerBox1">...some stuff...</div>

        </div>
    </div>

    <div class="Body-content">
    ... content ...
    </div>

    <div class="Other-content">
    ... content ...
    </div>

</div>

菜单按钮(图片)

<div>
<img id="mobileMenu-icon" src="/gif-new/buttons/mobile-Menu.jpg">
</div>

Answer 1

您可以使用 jQuery 的 .slideDown()而不是 .animate()..对于淡入淡出效果，请使用 .animate() 而不是 .fadeIn() 和 .fadeOut()

$('.LEFTNAV-content').slideDown();
$('.LEFTNAV-content').animate({opacity: 1},{queue: false});

对于隐藏菜单部分:.slideUp()

$('.LEFTNAV-content').slideUp();
$('.LEFTNAV-content').animate({opacity: 0},{queue: false});

看看这个jsFiddle - 我还修复了第一次点击没有效果的问题