how to animate div at fixed postion with jquery

Question

i have to divs side by side i.e

<table><tr>
<td><div id="div1"></div></td>
<td><div id="div2></div></td>
</tr></table>

where div1 has content in it and div2 is hidden now i have a link in div1 so that on clicking that link i want to show div2 with animate() slide from left to right on its position... where div2 has position:fixed in css how can i do that

Answer 1

Firstly you should consider using using a non tabular layout. Floating the 's next to each other is a much better starting point.

But to answer your question you could just do something like:

$(function(){
    $('#div1 a').toggle(
        function(){
            $('#div2').animate({width:$('#div1').width()},'slow');
        },
        function(){
            $('#div2').animate({width:0},'slow');
        }
    );
});

This assumes you have got the CSS properties overflow:hidden and width:0px set on the second div. This would make div2 the same width as the first div.

The slideUp and slideDown functions could also be used to achieve this.