I have a table that has six columns. I am trying to have two of the middle columns hidden at first but then when you click a button, they push the other ones out. Right now I am experimenting with hiding them behind another column with a -z-index and position absolute. I can't get jQuery to animate the transition. Here is the code. It removes the position: absolute and all but it doesn't have a cool transition. The html is just a table, where the TH's have ids and the cells have headers..

CSS:

```
    .hid{
    position: absolute;
    z-index: -50;
}

```

and here's the jQuery:

```
$("button#expand").live('click',function(){

    cols =$("#col-1, [headers=col-1], #col-2, [headers=col-2]  ");
    ///this variable gets all the cells of the table column for both 1 and 2

    if($(cols).hasClass("hid")){

        $(cols).removeClass("hid");
        //this works but it doesnt slide 
        $("button#expand").html("Hide");
    }

```