jQuery slideDown + CSS Floats

Question

Я использую таблицу HTML с несколькими строками. Каждая вторая строка, содержащая сведения о предыдущей строке, скрыта с помощью CSS.

При нажатии на первую строку отображается вторая строка с использованием jQuery show(). Это довольно мило, но я бы предпочел эффект SlideDown.

Проблема в том, что внутри строки сведений есть два плавающих DIV, один плавающий слева, а другой справа. Теперь, если я сдвину вниз ранее скрытую строку, содержащиеся в ней DIV ведут себя странно и «прыгают». Посмотрите этот анимированный рисунок, чтобы понять, что я имею в виду: http://ich -wars-nicht.ch / tmp / lunapic_127365879362365_.gif

Разметка:

<tr class="row-vm">
    <td>...</td>
    ...
</tr>
<tr class="row-details">
    <td colspan="8">
        <div class="vmdetail-left">
        ...
        </div>
        <div class="vmdetail-right">
        ...
        </div>
    </td>
</tr>

CSS:

.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; }
div.vmdetail-right { float: right; width: 50%; }

И код jQuery:

if ($(this).next().css('display') == 'none')
{
    // Show details
    //$(this).next().show();
    $(this).next().slideDown();
}
else
{
    // Hide details
    //$(this).next().hide();
    $(this).next().slideUp();
}

Есть ли способ исправить это поведение и реализовать хороший эффект slideDown?

Answer 1

Сводка: показать / скрыть tr, анимировать div с помощью slideUp / slideDown

Разметка: та же

CSS:

.table-vmlist tr.row-vm { cursor:pointer; }
.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; display:none; }
div.vmdetail-right { float: right; width: 50%; display:none; }

(div начинаются со скрытого. Также для удобства использования добавлен курсор-указатель к интерактивному значку tr)

И JQuery:

$('tr.row-vm').bind('click',function(e){
    if ($(this).next().css('display') == 'none')
    {
        // Show tr, slideDown inner divs
        $(this).next().show().find('div').slideDown('slow');
    }
    else
    {
        // slideUp inner divs, hide parent tr after animation complete
        $(this).next().find('div').slideUp('slow',function(){
            $(this).parent().parent().hide();
        });
    }
});

(Обратите внимание, что непосредственным родителем div является td, поэтому parent вызывается дважды для доступа к tr. Также добавлена ​​скорость слайда.)