slideToggle в строке таблицы

SlideToggle работает со строками таблицы, это просто отстой.

Если у вас есть столбец с высотой, большей, чем минимум,

<tr height="30%">

Затем slidetoggle будет делать плавное скольжение вниз, пока не достигнет минимальной высоты ... тогда он исчезнет сразу, как вы использовали

$("#tr").hide();

Я сделал jsfiddle, демонстрируя это на http://jsfiddle.net/BU28E/1/

Лучшим решением для вас может быть использование таблицы, сделанной из div. Divs будет скользить очень плавно. Я сделал еще один jsfiddle, демонстрирующий это на http://jsfiddle.net/BU28E/2/

То, что я делаю, помещают в DIV отдельную DIV и устанавливают отступ TR и TD до нуля. Затем я могу сдвинуть переключатель div вместо строки:

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

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

Я не знаю, было ли это обходное решение понятным и эффективным, но это сработало для меня:

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

$('table tr').first().children().slideUp();

поэтому, в основном, вы хотели бы скользить вверх по детям Row вместо самой строки :)

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

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

Эффект несколько отличается, поскольку содержание уменьшается, в отличие от обычного эффекта скольжения.

< 2в последней строке , возможно , должны быть скорректированы на основе ваших границ (и , возможно , других факторов). Кроме того, это только демонстрирует скрытие содержимого. Аналогичный подход необходим, чтобы размер шрифта увеличивался по мере того, как строка скользнула вниз. Это скорее доказательство концепции.

Изменить: После ответа Джонатана его метод выглядит немного чище.

Здесь у меня есть строка таблицы с классом, view-convertersкоторый при нажатии будет показывать / скрывать все div с классом TCConverters.

Мои строки выглядят так:

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

Вот код, который запускается при нажатии view-converters.

Я не делал ничего особенного с заполнением ячеек таблицы.

Обратите внимание, что мы скрываем строку таблицы, когда мы закончили анимацию слайда.

$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});

Это выглядит так:

Оригинал:

Здесь у меня есть таблица с классом, view-convertersкоторый при нажатии будет показывать / скрывать все строки с классом TCConverters:

Вы можете отрегулировать скорость, изменив hackyначальное значение и прирост в каждом .each.

Это не растягивает строки так же хорошо, как слайд-переключатель, но эффект работал для моих целей.

Если вы действительно хотите сжать высоту строки, вы можете просто анимировать ее самостоятельно, заменив param.hide()ее тем, setTimeoutчто сжимает высоту, пока не достигнет 0.

$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});

Это выглядит так: