CODEWITHSUNDEEP
jqueryhtmlmobilejquery-animate
Sammy
Sammy

Reputation: 139

JQuery Animate Height to 100%

I want to animate a menu (DIV) from height of 0% to 100% and vice versa. The hide menu code works. However, the show menu code simple fades in the element with a height of 100%. I want it to grow from 0% to 100%. Any ideas on how to solve this? I am fairly new to 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>

Menu Button (Image)

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

Upvotes: 1

Views: 9016

Answers (1)

Yotam Omer
Yotam Omer

Reputation: 15366

You can use jQuery's .slideDown() instead of .animate().. For the fade in and out effect use .animate() instead of .fadeIn() and .fadeOut()

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

and for the hide menu part: .slideUp()

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

Look at this jsFiddle - I also fixed the problem where the first click has no effect

Upvotes: 6

Related Questions