Анимации не поддерживаются в строках таблицы.
Из «Learning jQuery» Чаффера и Сведберга
Строки таблицы представляют особые препятствия для анимации, поскольку браузеры использовать разные значения (таблица-строка и блок) для их видимого отображения свойство. .Hide () и .show () методы без анимации всегда безопасно использовать со строками таблицы. По состоянию на jQuery версии 1.1.3, .fadeIn () и Также можно использовать .fadeOut ().
Вы можете обернуть содержимое td в div и использовать для этого slideDown. Вам нужно решить, стоит ли эта анимация дополнительной разметки.
Вы могли попытаться обернуть содержание строки в <span>
и иметь Ваш селектор быть $('#detailed_edit_row span');
- немного hackish, но я просто протестировал его, и это работает. Я также попробовал table-row
предложение выше, и это, казалось, не работало.
обновление : я играл вокруг с этой проблемой, и от всех признаков для jQuery нужен объект, на котором это выполняет slideDown быть элементом блока. Так, провал. Я смог вызвать в воображении таблицу, где я использовал slideDown на ячейке, и он не влиял на расположение вообще, таким образом, я не уверен, как Ваш настраивается. Я думаю, что Ваше единственное решение состоит в том, чтобы осуществить рефакторинг таблицу таким способом, которым это соглашается с той ячейкой, являющейся блоком, или всего .show();
проклятая вещь. Удача.
Я немного отстал от времени, отвечая на этот вопрос, но я нашел способ сделать это :)
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 это кому-то помогает!
Я новичок в этом сообществе. Пожалуйста, оцените мой ответ. :)
Вы можете найти этот отлично работает.
У меня есть таблица (
)
внутри
контент.
Чтобы сдвинуть строку вниз ..
$('.dummyRow').show().find("table").slideDown();
Примечание: строка и содержимое внутри строки (здесь таблица
) должны быть скрыты перед запуском анимации.
Чтобы сдвинуть строку вверх ..
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
второй параметр (функция) - это обратный вызов.
Просто !!
Я просто оборачиваю 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, так как я взял его плагин и переделал его в вышеуказанный, спасибо, приятель.