DIV con jQuery

Question

tengo este pequeño trozo de código que se puede ver en acción aquí

http://jsfiddle.net/rullingen/GCXsq/1/

Lo que básicamente se expande una altura div cuando se cernía sobre los contratos y cuando no. En este momento se expande de 75px a 300px. Me gustaría cambiar esto para que se expanda de 75px a una altura que se ajuste al contenido dentro del DIV. Intenté configurar el valor de expansión en 'auto', pero parece que no funciona bien. ¿Alguien puede darme un puntero?

HTML

<div class="expand"> 
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" /> 
</div> 
<div class="expand"> 
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" /> 
</div> 

<div class="expand"> 
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" /> 
</div> 

<div class="expand"> 
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" /> 
</div> 

<div class="expand"> 
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" /> 
</div> 

Javascript

$('.expand').hover(function() { 
    $(this).animate({ 
     height: '300px' 
    }, 300); 
},function() { 
    $(this).animate({ 
     height: '75px' 
    }, 300); 
}); 

CSS

.expand { 
    overflow: hidden; 
    margin-bottom: 15px; 
    height: 75px; 
} 

Answer 1

Puede calcular la altura acumulada de los elementos en su <div> y utilizar el resultado como el argumento de animate():

$('.expand').hover(function() { 
    var contentHeight = 0; 
    $(this).children().each(function() { 
     contentHeight += $(this).height(); 
    }); 
    $(this).animate({ 
     height: contentHeight 
    }, 300); 
}, function() { 
    $(this).animate({ 
     height: '75px' 
    }, 300); 
}); 

Fiddle actualizado here.

Answer 2

Puede establecer el estilo para "mostrar: bloque en línea" al pasar el mouse y quitarlo del mouse. Esto funciona para IE8. Para IE7: tiene todo lo que necesita para el estilo (zoom: 1; * pantalla: en línea; _altura: 30px; ") - la altura se puede cambiar según sus requisitos.