Анимация открытия / закрытия столбцов таблицы в jQuery - PullRequest
Новая
       31

Анимация открытия / закрытия столбцов таблицы в jQuery

5 голосов
/ 15 января 2010

Как можно анимировать открытие / закрытие столбцов таблицы в jQuery?

У меня сейчас есть этот кусок кода: 

jQuery(function($){
    $(".togglebutton").click(function(e){
        if (cost_visible) {
            $(".numbers").animate({width: 80}, 1500);
            $(".costs").animate({width: 0}, 1500);

        } else {
            $(".numbers").animate({width: 0}, 1500);
            $(".costs").animate({width: 60}, 1500);
        }
    });
});

и мой HTML, содержащий стандартные теги TABLE / TR / TH / TD с тегами TH и TD, несущими имена классов, используемые для определения того, что должно быть открыто или закрыто.

Кажется, проблема в том, что после того, как jQuery коснется стола, затронутые ячейки внезапно почувствуют необходимость укладываться друг на друга, вместо того, чтобы оставаться аккуратно в ряду.

Я предполагаю, что это связано с тем, что jQuery может анимировать только "блокирующие" элементы, а не элементы, которые отображаются "в виде таблицы". Так можно ли сделать таблицу из элементов блока? Или есть другой способ анимирования табличных элементов? Я нашел это предложенное решение, но кажется трудным заключать все элементы таблицы в DIV только для анимации ...

Ответы [ 4 ]

5 голосов
/ 18 января 2010

После некоторого изучения я обнаружил, что ...

  • Проблема действительно вызвана тем, что элементы TH и TD устанавливаются jQuery для «отображения: блока» элементов для анимации. Пока нет способа заставить JQuery вести себя по-другому.
  • Включение элементов TH и TD в теги DIV не работает, при поиске в Google появляется предположение, что HTML становится недействительным при использовании тегов DIV в структуре TABLE.
  • Включение содержимого элементов TH и TD в теги DIV не работает, содержимое начинает плавать после анимации и не остается в пределах элементов TH и TD.
  • В той же статье показано, что анимация открывающегося закрытия таблицы строк возможна с использованием секций TBODY в таблице.

Мне удалось то, что я хотел, и вот как:

  • Я разрезал таблицу на несколько вложенных таблиц, состоящих из групп столбцов, которые я хочу показать и скрыть
  • Я вложил эти вложенные таблицы в теги DIV и разместил их рядом друг с другом.
  • Я использовал jQuery, чтобы показать / скрыть эти DIV.

Надеюсь, это кому-нибудь поможет, и если будет найдено более элегантное решение, оставьте сообщение.

3 голосов
/ 05 января 2011

Хотя это не тот же эффект, методы jQuery fadeIn () и fadeOut () работают правильно на таблицах. Методы show () и hide () (без анимации) также работают.

0 голосов
/ 09 сентября 2015

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

Здесь демоверсия .

JS: 

$("div").css("width", $("table").width() + 10); //10px of margin
$("div").css("height", $("table").height() + 10); //10px of margin

$("#show").click( function(){
    $("div").animate({
        left: $("div").width()
    }, function (){
    $("div").hide();
    });
});

$("#hide").click( function() {
    $("div").show( "fast", function (){
        $("div").animate({ left: "0px" });
    });
});
0 голосов
/ 13 января 2015

С юбилеем.

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

$(table).each(...
    var columnNo = $(cell).index();
    $('div', cell).animate({ width: '0px' }, 'slow');
    $(cell).closest("table")
        .find("tr td:nth-child(" + (columnNo + 1) + ") div")
        .animate({ width: '0px' }, 'slow')
...)

По сути, это обходной путь с использованием divs. Я выбираю каждый cell «й», а затем нахожу все остальные ячейки в этом столбце. И прогрессивлу это уменьшает каждый размер пикселя div с помощью анимации. Таблица будет пересчитана в соответствии со спецификацией HTML, потому что занимаемое пространство меняется. После его завершения вы можете скрыть столбец, чтобы они исчезли

Скрипт для переноса всего в div, например, при загрузке страницы или после нажатия кнопки. Вы также можете удалить div после завершения анимации, если он портится при отправке формы или других сценариях. 

 $('#Stupid_RadGrid th').each(function () {
          $(this).wrapInner("<div></div>"); 
 });
 $('#Stupid_RadGrid td').each(function () {
         $(this).wrapInner("<div></div>");
 });

Я обновлю, как только у меня получится работать в обоих направлениях.

...