Jquery滑出一个相邻的div

Question

If you look to the right side of this page you'll see what I'm talking about.

Basically, when you click on that little "Tag this Picture/Submit Picture", I want a it to slide out along with a previously hidden div to the right of it. I kind of have that working right now, but as you can see the part you click just jumps over to the ending point instead of being "pushed" out by the new panel sliding out, which is what I want it do do.

Here's the Jquery I have so far:

<script type="text/javascript">
     $(document).ready(function(){

        $("#right_new").click(function(){
        $("#right_panel").show('slide', {direction: 'right'}, 500);

        });

        });
</script>

If anyone can help me implement a toggle part of it, that would be awesome too, but what I really need for now is just the slide part to work well. I can probably figure out the if/then part for that eventually.

Thanks in advance. Let me know if you need any additional info!

Answer 1

Do:

    <script type="text/javascript">
     $(document).ready(function(){

        $("#right_new").click(function(){
          $("#right_side_container").show('slide', {direction: 'right'}, 500);

        });

        });
</script>

Answer 2

The reason your icons are popping out before the slide is happening, is b/c you are hiding the #right_panel , then displaying with the .show() command, will now it's occupying space in the dom and pushing your item to the left.

What I like to do is animate the whole block in and out using the position:absolute;

Take a look at these CSS and JS changes http://jsfiddle.net/rtgibbons/jDThJ/ (note: this slides it in and out)

I'm using the .animate({right: '' }) to move the entire container left and right.