Анимация стола с jQuery

Question

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

This - это моя старая нить.

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

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

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

Answer 1

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

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() есть. Возможно, вы могли бы покончить с этим.

Answer 2

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

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