jQuery slide up the image?

Question

Ok, j'ai une structure comme celle-ci:

<div class="image"> 
    <img src="img1.jpg" alt="" /> 
</div> 

<div class="image"> 
    <img src="img1.jpg" alt="" /> 
</div> 

<div class="image"> 
    <img src="img1.jpg" alt="" /> 
</div> 

et CSS comme ceci:

.image{ 
    height:100px; 
    overflow: hidden; 
} 

SO essentiellement, seul le 100px haut de l'image montre. Lorsque l'utilisateur survole l'image, je veux faire défiler l'image vers le bas 100px. c'est-à-dire, il anime de montrer le haut 100px au fond 100px.

Maintenant, si toutes les images avaient la même hauteur, ce serait facile. Je pourrais le faire, pour une image haute 500px:

$('.image img').hover(
    function(){ 
    $(this).stop().animate({marginTop:'-400px',}, 1000); 
    }, 
    function(){ 
    $(this).stop().animate({marginTop:'0px',}, 1000); 
    } 
    ); 

Le problème est, les trois images sont de hauteurs différentes. Et pour autant que je sache, il n'y a vraiment aucune méthode fiable pour obtenir la hauteur de l'image cross-browser. Sp aucune idée comment je peux résoudre ceci?

Toute aide est très appréciée.

Answer 1

Avez-vous essayé d'utiliser la méthode height() de jQuery pour obtenir la hauteur de l'image? Il existe probablement des correctifs de compatibilité inter-navigateur intégrés.

$('.image img').hover(
    var $th = $(this); 
    var height = $th.height(); 
    function(){ 
    $th.stop().animate({marginTop:-(height - 100)}, 1000); 
    }, 
    function(){ 
    $th.stop().animate({marginTop:'0px'}, 1000); 
    } 
);