Question

I want to have an element with a fixed, small height that expands to his full height on a mouseover and shrinks back when mouse leaves.

Doing something like:

    $(".element").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height, 
                             width: $.data(this,'size').width });
}, function() {
    $(this).stop().animate({ height: 40, 
                             width: $.data(this,'size').width });
}); 

…works, but on page load the element starts at full height.

What is the best way to have it shrinked on page load ?

Answer 1

try it like this, it is better to understand. check fiddle example. In this way you can even add other animation effect like changing background color …..

CSS:

.div_small_height{
 height : 20px;
 width : 500px;
 background-color : red;
 overflow : hidden;
}
.div_full_height{
   width : 500px;
   background-color : blue;
}

Jquery:

$(".element").addClass('div_small_height'); // shrink it on page load
 // change on mouseenter and mouse leave
$(".element").hover(function(){
    $(this).switchClass("div_small_height","div_full_height",500);
},function(){
    $(this).switchClass("div_full_height","div_small_height",500);
});

fiddle example : http://jsfiddle.net/7PV98/