Div with Slide in/out effect to any direction like right to left, left to right or bottom to top and top to bottom etc jquery

suppose i have one div called Main and with in main div i want to generate and position a div to right side so it will not be visible. the moment i will click on button called right2left then inner div will slide to left side from right side and cover the
main div. both main and inner div will be same size.

the same way i want to slide div from left to right and top to bottom and bottom to top.

<div id="main"></div>
$("<div id='inner'>").appendTo('#main');

the above way i can generate a div and push it in main div.
now the question is how to position inner div in main div to right side so it will not be visible and when click on button then inner div will be visible and slide to left side and cover the main div. how to know how much i need to drag the inner div from right
to left to cover the main div?

anyone can help to show div with slide in/out effect to any direction like right to left, left to right or bottom to top and top to bottom etc.

Hi mou_inn,

mou_inn

now the question is how to position inner div in main div to right side so it will not be visible and when click on button then inner div will be visible and slide to left side and cover the main div. how to know how much i need to drag the inner div from
right to left to cover the main div?

anyone can help to show div with slide in/out effect to any direction like right to left, left to right or bottom to top and top to bottom etc.

For this issue, I suggest you could use the JQuery slideToggle method and animate method. More details, please refer to the following sample.

    <style type="text/css">
        .slide {
            position: relative;
            height:360px;
            width:600px;
            background-color:green;
            overflow:hidden;
        }
            .slide .inner {
                position: absolute;
                left: 50px;
                width:500px;
                height:360px;
                background-color:greenyellow;
            }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#bottom').click(function () {
                $('.inner').css("bottom", "0px");
                $('.inner').slideToggle();
            });
            $('#top').click(function () {
                $('.inner').css("bottom", "");
                $('.inner').slideToggle();
            });

            $('#left').click(function () {
                $('.inner').animate({ width: 'toggle' });
            });

            $('#right').click(function () {
                var $marginLefty = $('.inner');
                $marginLefty.animate({
                    marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginLefty.outerWidth() : 0
                });
                //You could also try to use the following code.

                //if (parseInt($marginLefty.css('marginLeft'), 10) == 0)
                //{
                //    $marginLefty.animate({ marginLeft: $marginLefty.outerWidth() });
                //    $marginLefty.hide("slow");
                //}
                //else
                //{
                //    $marginLefty.animate({ marginLeft: 0 });
                //    $marginLefty.show("slow");
                //}
            });
        });
    </script>
    <div id="slidebottom" class="slide">
    <div class="inner">Slide from bottom</div>
    </div>

    <button id="bottom">slide it from bottom</button>
    <button id="left">slide it from left</button>
    <button id="right">slide it from right</button>
    <button id="top">slide it from top</button>

For more information, you could refer to this article.

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

Best Regards,
Dillion

you are increasing height & width but i am trying to achieve different effect. please look at this jsfiddle link
http://jsfiddle.net/tridip/E9xTL/

the link effect is working fine but i want to know how to customize the link js code to make move it any direction like "top-bottom" "bottom-top" "left-right" and "right-left". if possible customize the js fiddle code and let me know. thanks

Leave a Reply