Looking to build an expand on hover/contract on blur div

Question

Hey all, I've been beating my head against the search engine walls for a couple hours now and figure I might as well just ask...

I need to build a div that is one size on blur, say 300x30, that expands to 300x300 on hover and pushes all content below it down and will revert to the 300x30 size when blurred ("no longer hovered" or whatever you kids are calling it now-a-days lol) again. Can someone point me to some resources or even give me some code bits to play with? It'd be much appreciated!

Answer 1

You can use Psuedo-classes in CSS if you don't want an animation.

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}​

Live Example

http://jsfiddle.net/aFUmS/

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});​

jQuery example if you want animation

http://jsfiddle.net/CvhkM/

Answer 2

If you add a transition to Robert's answer, it's CSS-only, and you get animation, too:

Add this to the div (not the div:hover): transition: height 0.5s ease-in;

I just implemented this on a site, and it even works well for mobile. The div does have to be a static height when collapsed and expanded, though.

Answer 3

Or you can add a .stop() before the .animate and the animation will stop immediately after you remove the pointer.

$('.div').hover(function() {
    $(this).stop().animate({
        height: '300px'
    }, 300);
},function() {
    $(this).stop().animate({
        height: '30px'
    }, 300);
});