Sliding door effect with JQuery

This was my first tutorial, but due to some issues with wordpress plugin it was lost, and now it’s back :)… We are going to make a nice little animation with JQuery, a javascript library i will often use in my tutorials.

I think the name of this tutorial explains a bit about the animation we are making, but check the demo first to see how it looks.

Demo Source

HTML

   <div class='box_container'>
        <img class='box_image' src='img.jpg' style='width:300px'/>
        Just some dummy text.
   </div>
   <div class='clear'></div>

The HTML part is pretty simple as you can see, we got a container div (some of you may call it a wrapping div) in which we have an image and some text.

sd_1

That is how it looks now, it’s not what we want it to look like at all, isn’t it. So the next part is CSS.

CSS

    .box_container{
    position:relative; /* important */
    width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
    height:220px; /* important if you use slidedown/slideup effects (check the demo). */
    overflow:hidden; /* hide the content that goes beyond the div limits */
    /*just styling bellow*/
    background: black;
    color:white;
    }
    .box_image{
    position:absolute; /* important - to get the image position on top of the text */
    }

And this is what we have now

sd_2

I know it looks like it’s just the image, that’s because the image is on top of the text, and that’s where we want it to be. Next step… Jquery.

JQuery

  $(document).ready(function() {

        /*when the user hovers over the DIV that contains the image and the text... */
        $('.box_container').hover(function(){

            /*... we get the DIV's width ... '*/
            var width = $(this).outerWidth();

            /*... and change the position of the image to that width with an animation effect... */
            $(this).find('.box_image').animate({ left : width },{queue:false,duration:300});
            /*queue:false means that if hovered again it won't wait for the previous animation to finish
            duration:300 means that the animation effect will take 0.3 seconds to finish '*/

        }, function(){

            /*... and when he hovers out we get the image back to it's starting position using the same function... '*/
            $(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:300});

        });

  });

It’s that simple. In the demo you can see few examples.

Final words

And we’re done :) .

That’s it for today, and remember that SHARING is CARING, so SHARE this tutorial :)

Check out my other blog, WpCanyon for WordPress tutorials, tips, tricks and many more.

17 Responses

Masoud

Aug 20th, 09

very nice idea.but i think needs some effects like :

easing
fades and ….

like this :

$(‘.box_container’).hover(function() {

/*… we get the DIV’s width … ‘*/
var width = $(this).outerWidth();

/*… and change the position of the image to that width with an animation effect… */
$(this).find(‘.box_image’).animate({ top: width / 4 },{ queue: false, duration: 500 }).fadeTo(500,0.2);
/*queue:false means that if hovered again it won’t wait for the previous animation to finish
duration:300 means that the animation effect will take 0.3 seconds to finish ‘*/

}, function() {

/*… and when he hovers out we get the image back to it’s starting position using the same function… ‘*/
$(this).find(‘.box_image’).animate({ top: ‘0px’ }, { queue: false, duration: 700 }).fadeTo(1000, 1);

});

Boba

Aug 20th, 09

Thanks for your comment. :)

I showed how to make the basic sliding door effect, additional effects like fading, easing, direction of slide – demo shows how to do that, duration… are up to you, readers.

And if someone wants to make some additional effect, just ask, i will help. :) That’s the purpose of this blog :)

Thanks again for your idea, i will add it tomorrow to the demo page, and mention your name of course. :)

Masoud

Aug 20th, 09

Boba :
Thanks for your comment.
I showed how to make the basic sliding door effect, additional effects like fading, easing, direction of slide – demo shows how to do that, duration… are up to you, readers.
And if someone wants to make some additional effect, just ask, i will help. That’s the purpose of this blog
Thanks again for your idea, i will add it tomorrow to the demo page, and mention your name of course.

thanks boba !!!
I make mine :p

see here

Masoud

Aug 20th, 09

sorry for double post and bad link :p

see my demo here :
http://daneshpour.org/boba.htm

I fix extra animates with .stop() funtion and use a easing for better view !!!

;)

Boba

Aug 20th, 09

Nice example :) Inserted the link to it in the tutorial.

Thanks.

kevin

Aug 20th, 09

:) well done!

Boba

Aug 20th, 09

hehe :)

Jason

Sep 17th, 09

Cool script!
I tried modifying the code to invoke the effect on page load but was unable to get it to work.

The effect I’m going for would have the image ‘hidden’ on page load, then have the image slide in after the page loads….similar to a ‘gofer effect’ whey the gopher pops up from his hole (meh, not the best visual, but hopefully you get the idea).

Wouldn’t an ‘onload’ event do the trick? If so, can you help?

Thanks!

Boba

Sep 17th, 09

CSS
.box_image{
position:absolute;
left: 100%;
}

jQuery
$(window).load(function(){

$(this).find(‘.box_image’).animate({ left : 0},{queue:false,duration:300});

});

Didn’t test it, if it doesn’t work tell me and i’ll make it work :)

Boba

Sep 17th, 09

sorry, instead of $(this).find(‘box_image’) put $(‘.box_image’)

belli

Oct 21st, 09

i cant make it link,,, when i click on it????

Boba

Oct 21st, 09

Link the text behind the image or…?

wespai

Dec 29th, 09

thx collect it to

ajax.wespai.com