Почему этот DIV не падает в нужном месте?

Question

Хорошо, вот проблема. У меня есть неупорядоченный список с кучей предметов. Для каждого элемента есть соответствующий DIV, который будет выпадать при наведении на элемент.

Образец можно найти здесь .

Теперь все работает нормально, если вы не прокрутите страницу немного , а затем не попытаетесь навести курсор на элемент. Затем он скользит вниз по странице вверх, чем предполагалось.

Вот соответствующий код со страницы, указанной выше:

<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>

...

Есть идеи, почему это происходит?

Answer 1

Проблема, похоже, связана с методом position интерфейса. Кажется, что следующее работает нормально

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();
}

Демо: http://www.jsfiddle.net/jnUsN/1/

Answer 2

Ну, я нашел то, что сработало:

[посмотреть измененный образец]

Соответствующий код:

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();
}

... и потому что Chrome не отрендерил бы его с первой попытки:

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