Анимация таблицы с помощью jQuery - PullRequest
Новая
       32

Анимация таблицы с помощью jQuery

1 голос
/ 03 января 2012

Я задал вопрос вчера здесь и получил отличную помощь, но мне нужно больше помощи, касающейся более или менее того же самого, только немного другого.

Это моя старая тема.

Итак, вы сделали это, и идея в том, что вы можете настроить таблицу так, чтобы вы смотрели ее так, как хотите. сейчас можно перетаскивать столбцы, чтобы изменить порядок, и можно упорядочивать столбцы по алфавиту или по максимуму / минимуму. Так как я получил помощь здесь, теперь также возможно скрыть столбцы.

Теперь я хочу сделать процесс скрытия немного более плавным, так как трудно увидеть, скрыто ли что-то после щелчка, если вы не используете анимацию. Я использую .fadeOut (200); сейчас, но когда затухание закончено, столбец просто «перепрыгивает», чтобы заполнить пробел, возможно ли оживить это каким-то образом?

Редактировать: Подумав еще немного, я подумал, что я мог бы просто зациклить ширину -1px, пока ширина элемента не будет 1px, а затем просто скрыть его, но по какой-то причине это не сработает, таблица не отвечает на .width (xxx ); или .css ('width', 'xxx') ;. Это меняет значение, но td сохраняет ту же ширину.

Ответы [ 2 ]

1 голос
/ 03 января 2012

Это своего рода обходной путь, и может быть лучшее решение, но здесь оно в любом случае:

  1. Анимация непрозрачности до 0,0.Fadeout делает то же самое, но также устанавливает display:none после полного исчезновения.Именно display:none заставляет соседний столбец прыгать и заполнять пробел.

  2. Анимация приведет к тому, что ваш скрытый div останется там.Теперь, когда он больше не виден, анимируйте его ширину равной 0. Это приведет к тому, что соседний div будет плавно занимать свое место.

  3. Когда ширина равна 0, установите display:none

Вот рабочий образец, который я взбил.Отрегулируйте соответственно ширине анимации: http://jsfiddle.net/x7BEv/8/

Вот как происходит волшебство: 

$(document).ready(function(){
    $('#button').click(function(){
        $('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
    });
});

function allDone()
{
    $('#upper').hide();
}

Я не уверен, насколько важен метод allDone().Вы могли бы покончить с этим.

1 голос
/ 03 января 2012

вы должны использовать jqgrid

или просто для сортировки вы можете использовать tablesorter, что очень легко реализовать

...