Pourquoi cette DIV ne tombe-t-elle pas au bon endroit?

Question

D'accord, voici le problème. J'ai une liste non ordonnée avec un tas d'articles. Pour chaque article, il y a un DIV correspondant qui va tomber lorsque l'objet est survolé.

L'échantillon peut être trouvé here.

Maintenant, cela fonctionne très bien sauf si vous faites défiler la page un peu puis essayez de passer la souris sur l'élément. Ensuite, il glisse plus haut dans la page qu'il ne le devrait.

Voici le code correspondant de la page liée ci-dessus:

<script type="text/javascript"> 

function doOver(num) 
{ 
    $('#s' + num).position({ of: $('#m' + num), 
          my: 'left top', 
          at: 'left bottom' }); 
    $('#s' + num).slideDown(); 
} 

</script> 

... 

<ul id="test" style="width: 400px; height: 25px; background-color: red;"> 
    <li id='m1' onmouseover='doOver(1)'>TestItem1</li> 
    <li id='m2' onmouseover='doOver(2)'>TestItem2</li> 
    <li id='m3' onmouseover='doOver(3)'>TestItem3</li> 
</ul> 

<div id='s1' style='width: 100px; height: 50px; position: absolute;'></div> 
<div id='s2' style='width: 100px; height: 50px; position: absolute;'></div> 
<div id='s3' style='width: 100px; height: 50px; position: absolute;'></div> 

... 

Toute idée pourquoi cela se produit?

Answer 1

Le problème semble être la méthode position de l'interface utilisateur .. ce qui suit semble fonctionner très bien

function doOver(num) 
{ 
    var $m = $('#m'+num); 
    var mPos = $m.position(); // you could you $m.offset() here (depenging on the overall structure) 
    var mHeight = $m.outerHeight(); 
    $('#s' + num).css({ 'top':mPos.top + mHeight, 'left':mPos.left }); 
    $('#s' + num).slideDown(); 
} 

Démo: http://www.jsfiddle.net/jnUsN/1/

Answer 2

Eh bien, je trouve quelque chose qui a fonctionné:

[view modified sample]

Code pertinent:

function Position(item,parent) 
{ 
    $(item).position({ of: $(parent), my: 'left top', at: 'left bottom' }); 
} 

function doOver(num) 
{ 
    $('#s' + num).css('height','0px'); 
    $('#s' + num).show(); 
    Position('#s' + num,'#m' + num); 
    $('#s' + num).hide(); 
    $('#s' + num).css('height','50px'); 
    $('#s' + num).slideDown(); 
} 

... et parce que Chrome ne le rendre droit sur le premier essai:

$(function() { 
    Position('#s1','#m1'); 
    Position('#s2','#m2'); 
    Position('#s3','#m3'); 
});