Question

I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.

This is my old thread.

So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.

Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just ‘jumps’ to fill the gap, is it possible to animate this in some sort?

Edit: After thinking some more, I thought that I could just loop a -1px width untill the element’s width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css(‘width’, ‘xxx’);. It does change the value, but the td keeps the same width.

Answer 1

This is somewhat of a workaround, and there might be a better solution, but here it is anyway:

1. Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.

2. Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.

3. Once width is 0, set display:none

Here’s a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/

Here’s how the magic happens:

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

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

I’m not sure how important the allDone() method is. You could probably do away with it.