Не получается сделать jQuery анимацию появления элемента

Question

Не получается сделать jQuery анимацию появления элемента

Рейтинг: 0Ответов: 1Опубликовано: 20.03.2023

Коллеги, здравствуйте!

Есть у меня table (не спрашивайте почему, просто другого нет).
Мне нужно сделать чтобы его tbody открывался/скрывался по щелчку на thead.

<table class="table-spoiler">
  <thead><tr><th>Заголовок</th></tr></thead>
  <tbody><tr><td>Содержимое</td></tr></tbody>
</table>

И скрипт

        $('table.table-spoiler thead').click(function () {
            t = $(this).parent("table").find("tbody").eq($(this).index($("thead")));
            if ( t.css('display') == 'none' ) {
                t.css('display', 'table-row-group');
            }
            else { 
                t.css('display', 'none');
            }
        });

И стиль

table.table-spoiler tbody { display: none; }

Вроде, работает. Открывает и закрывает.

Но мне бы неплохо сделать какую-нибудь анимацию открывания, а то тупо как-то: экран дернулся и что-то довольно сильно изменилось (у меня таблица там открывается немаленькая).

Меня вполне устроит если таблица откроется пустым полем, а потом на ней проявится содержимое.

Пишу:

        $('table.table-spoiler thead').click(function () {
            t = $(this).parent("table").find("tbody").eq($(this).index($("thead")));
            if ( t.css('display') == 'none' ) {
                t.css('display', 'table-row-group');
                t.css('opacity', '1');
            }
            else { 
                t.css('opacity', '0');
                t.css('display', 'none');
            }
        });

И обновляю стиль:

    table.table-spoiler tbody {
        display: none; 
        opacity: 0;
        transition: opacity 1s ease-out;
    }

И, по идее, должно при нажатии на закрытую таблицу сначала открыться пустое tbody с opacity 0, а потом opacity проявиться за 1 секунду с указанным ease.

Но почему-то эффекта transition нет. Врубает в момент и вырубает мигом.
В браузере если эти действия делать вручную, все работает, ессессно.

Что я делаю не так?

css javascript html jquery

Источник: Stack Overflow на русском

Answer 1

▲ 0

Короче, не разобрался с этими opacity и сделал через jQuery fadeIn()/fadeOut().

    $('table.table-spoiler thead').click(function () {
        t = $(this).parent("table").find("tbody").eq($(this).index($("thead")));
        if ( t.hasClass('open')) {
            t.removeClass('open');
            t.fadeOut(500);
        }
        else {
            t.addClass('open');
            t.fadeIn(500);
        }
    });

Пришлось, правда, предварительно такое сделать, чтобы таблички не торчали раскрытыми:

    $('table.table-spoiler tbody').fadeOut(1);

И CSS весь убрал, кому он теперь нужен?

Не получается сделать jQuery анимацию появления элемента

Ответы