JQuery Animate高度达到100%

Question

我想要从0%到100%的高度设置菜单(DIV)的动画,反之亦然.该隐藏菜单代码工作.但是,显示菜单代码简单地在元素中淡化,高度为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 - 我还解决了第一次点击没有效果的问题