1

我想将菜单 (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>
4

1 回答 1

6

您可以使用 jQuery.slideDown()代替.animate().. 对于淡入和淡出效果，使用.animate()代替.fadeIn()and.fadeOut()

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

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

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

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

于 2013-06-27T18:28:29.443 回答