CODEWITHSUNDEEP
jquery
user3400080
user3400080

Reputation: 211

How to animate height auto in jquery?

I have made vertical-drop-down menu. The problem is when I want to add more submenu, I have to change the height each time. Is there any way to make height auto ?

Fiddle here [http://fiddle.jshell.net/E2EQn/]

This is my jquery code here 

$(document).ready(function(){
    $("#gnb").mouseover(function() {
        $('#header').animate({height: "349px"}, 200 );  // this height need to auto-height   
        $('#subLayer').css({height: "349px"});     // this height need to auto-height
        $('#subLayer ul').css({height: "349px"});  // this height need to auto-height   

    });
    $("#header").mouseleave(function() {
        $(this).animate({height: "96px"}, 200 ); 
    });   
    $("#subLayer").mouseleave(function() {
        $('#header').animate({height: "96px"}, 200 ); 
    }); 

});

Upvotes: 1

Views: 99

Answers (1)

icktoofay
icktoofay

Reputation: 129011

If you're fine using jQuery UI, you can start using classes rather than explicit styles and then use the altered addClass and removeClass methods.

For example, if we had the HTML:

<div id="container">
    <h1>Header</h1>
    <p>Content</p>
</div>

We could use this CSS:

div, h1, p {
    /* normalize */
    margin: 0;
    font-size: 1em;
    line-height: 1;
}
#container {
    overflow: hidden;
}
#container.collapsed {
    height: 1em;  /* just enough to show the header, but no content */
}

Then, we could make it expand or collapse on hover with jQuery rather easily: JSFiddle

var container = $('#container').addClass('collapsed').hover(function() {
    container.removeClass('collapsed', 200);
}, function() {
    container.addClass('collapsed', 200);
});

Upvotes: 1

Related Questions