Geek Answers Handbook

JQuery animation height for auto

I have ul with a height of 125px. When the user hovers ul, I want the height to be animated to the height of auto. And when the user exits ul, UL will again split by 125px.

    $('.box .box-overflow ul').hover(function() {
        $(this).animate({
            height: '100%'
        }, 400);
    }, function() {
        $(this).animate({
            height: '125px'
        }, 400);
    });

This works, but when the user comes to ul, it expands, but not with a nice animated effect?

Can someone help me on this? :)

+5
source share
3 answers

You can do this with scrollHeight.

$('ul').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: '125px'
  }, 400);
});
+8
source

try something like this on hover:

var height = $(this).css('height','auto').height();  // get real height
$(this).css('height','125px'); // return current state;
$(this).animate({height: height+'px'}, 400);

, UL. , .

: http://jsfiddle.net/axpFk/

+3

Sent this to another place, but I also feel that it is useful here: I made a small plugin that deals with this problem - should be quite simple, based on the Darcy Clark method that was published here , with some (imo) very necessary improvements. Just plug and play for jQuery:

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin

0
source

More articles:


All Articles