jQuery тег анимации таблицы tbody

Question

У меня есть этот код, который работает:

    $('a.click_more').click(function() {
            $(this).parents('table.city_table').children('tbody').toggle();
    });

Я пытаюсь создать приятную плавную анимацию, чтобы показать и скрыть элементы таблицы. Я попробовал это, но он делает то же самое, что и верхний код, хотя и с небольшой задержкой. Вероятно, продолжительность полсекунды, которую я установил.

    $('a.click_more').click(function() {
        $(this).parents('table.city_table').children('tbody').animate({height:'toggle'}, 500);
    });

Кто-нибудь выполнил анимацию строк, ячеек, столбцов и т. Д. Таблицы или есть предложения?

Я создал jsfiddle, если кто-то хочет поиграть с кодом: http://jsfiddle.net/BHqSM/1/

Answer 1

Поскольку вы не упоминаете, какой переход вы ищете, трудно привести хороший пример. Однако jQuery предоставляет вам пару переходов для использования «из коробки». Например, вы можете использовать либо .fadeToggle() для постепенного исчезновения элемента ввода / вывода, либо .slideToggle() для перемещения элемента вверх / вниз вместо вашего .toggle(), который просто переключает дисплей между блоком и нет.

Answer 2

Элементы таблицы плохо анимируются, и обойти их невозможно.Единственный плавный метод для анимации строк, например, состоит в том, чтобы обернуть внутреннее содержимое td в div и анимировать div

Answer 3

Попробуйте функцию slideToggle():

$('a.click_more').click(function() {
    $(this).parents('table.city_table').children('tbody').slideToggle('slow');
});