Как Использовать slideDown (или шоу) функционируют на строке таблицы?

212
задан Erik Philips 6 February 2015 в 12:35
поделиться

5 ответов

Анимации не поддерживаются в строках таблицы.

Из «Learning jQuery» Чаффера и Сведберга


Строки таблицы представляют особые препятствия для анимации, поскольку браузеры использовать разные значения (таблица-строка и блок) для их видимого отображения свойство. .Hide () и .show () методы без анимации всегда безопасно использовать со строками таблицы. По состоянию на jQuery версии 1.1.3, .fadeIn () и Также можно использовать .fadeOut ().


Вы можете обернуть содержимое td в div и использовать для этого slideDown. Вам нужно решить, стоит ли эта анимация дополнительной разметки.

293
ответ дан 23 November 2019 в 04:29
поделиться

Вы могли попытаться обернуть содержание строки в <span> и иметь Ваш селектор быть $('#detailed_edit_row span'); - немного hackish, но я просто протестировал его, и это работает. Я также попробовал table-row предложение выше, и это, казалось, не работало.

обновление : я играл вокруг с этой проблемой, и от всех признаков для jQuery нужен объект, на котором это выполняет slideDown быть элементом блока. Так, провал. Я смог вызвать в воображении таблицу, где я использовал slideDown на ячейке, и он не влиял на расположение вообще, таким образом, я не уверен, как Ваш настраивается. Я думаю, что Ваше единственное решение состоит в том, чтобы осуществить рефакторинг таблицу таким способом, которым это соглашается с той ячейкой, являющейся блоком, или всего .show(); проклятая вещь. Удача.

4
ответ дан Paolo Bergantino 23 November 2019 в 04:29
поделиться

Я немного отстал от времени, отвечая на этот вопрос, но я нашел способ сделать это :)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

Я просто поместил элемент div внутрь теги данных таблицы. когда он установлен видимым, при расширении div вся строка опускается. затем велите ему постепенно исчезнуть (затем тайм-аут, чтобы вы увидели эффект), прежде чем снова скрыть строку таблицы :)

Hope это кому-то помогает!

3
ответ дан 23 November 2019 в 04:29
поделиться

Я новичок в этом сообществе. Пожалуйста, оцените мой ответ. :)

Вы можете найти этот отлично работает.

У меня есть таблица (

)

внутри контент.

Чтобы сдвинуть строку вниз ..

$('.dummyRow').show().find("table").slideDown();

Примечание: строка и содержимое внутри строки (здесь таблица ) должны быть скрыты перед запуском анимации.

Чтобы сдвинуть строку вверх ..

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

второй параметр (функция) - это обратный вызов.

Просто !!

2
ответ дан 23 November 2019 в 04:29
поделиться

Я просто оборачиваю tr динамически, а затем удаляю его после завершения slideUp/slideDown. Это довольно небольшая работа по добавлению и удалению одного или пары тегов, а затем удалению их после завершения анимации, и я не вижу никакого видимого лага при этом.

SlideUp:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){

  $(this).parent().parent().remove();

 });

SlideDown:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){

  var $set = $(this);
  $set.replaceWith($set.contents());

 });

Я должен отдать должное fletchzone.com, так как я взял его плагин и переделал его в вышеуказанный, спасибо, приятель.

156
ответ дан 23 November 2019 в 04:29
поделиться
Другие вопросы по тегам:

Похожие вопросы: