CODEWITHSUNDEEP
javascriptjqueryslide
Mark Lyons
Mark Lyons

Reputation: 1422

Jquery slide out with an adjacent div

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!

Upvotes: 0

Views: 634

Answers (2)

Ryan Gibbons
Ryan Gibbons

Reputation: 3601

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.

Upvotes: 1

Tadej Magajna
Tadej Magajna

Reputation: 2963

Do: 

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

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

        });

        });
</script>

Upvotes: 1

Related Questions