Search code examples
javascriptjqueryjquery-animateslideupslidedown

Temporarily adjust height of element on hovering

I have a <h3> tag with limited height (100 px for example, position: absolute) and the text overflows it.

What I would like to do is slide it down over to the height that is needed when the mouse is over it and back to original height (100px).
I hope you understood what I mean

I don't think it uses slidedown() function for that and I am very weak in animate function. Any help please?

Solution

  • You can nest a div inside the h3 that contains the content and then use the h3 as a masking container (use overflow:hidden). When the user mouses over, fire a function that get's the height of the interior div (make sure to include any margins or padding). Then execute you height adjust animate function (In jquery, something like $('h3').animate({height: heightVar}); )The mouseout fires a function that restores the height of the h3 back to 100px.

    Here's a sample: http://jsfiddle.net/XR9fb/