Question

我想从0％到100％的高度设置菜单（DIV）的动画，反之亦然。 隐藏菜单代码有效。但是， show menu 代码在高度为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 - 我还解决了第一次点击无效的问题

JQuery Animate高度达到100％

1 个答案: