enavu webdevmania tutsvalley psdestination
visit the enavu network
18 Comments Article Title Overlay Article Title

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare
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 :) .

Related posts:

  1. Image splitting effect with CSS and JQuery
  2. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  3. Cool navigation menu made with JQuery
  4. Making an infinite JQuery carousel
  5. Curtains Opening Animation with jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • 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);

    });

  • 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. :)

  • 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

  • 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 !!!
    ;)

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

    Thanks.

  • :) well done!

  • hehe :)

  • 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!

  • 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 :)

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

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

  • Link the text behind the image or…?

  • thx collect it to

    ajax.wespai.com

  • Lovely photograph over there; may I know where is that from?

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting