Important Notice: Anyone who tried to download the Notification Bubbles PSD yesterday will have noticed it was empty. It's been fixed now!
The Finished Box

Digital Resource Magazine

Subscribe
Options
About tfbox
Share

Create a Stunning Sliding Door Effect with simple jQuery

Loading...
11
20572
Create a Stunning Sliding Door Effect with simple jQuery

A quick and easy tutorial on how to use simple jQuery animation & CSS to create a stunning sliding door effect.

Love it? 35
Tutorial Details
Tutorial Type
jQuery
Difficulty
Easy
Estimated Time
15-20 Minutes

When you’re creating a website first impression counts for a lot, with simple jQuery animation you can add numerous effects to your elements. In this tutorial we will be creating an effect commonly named as Sliding Doors. It’s rather simple to execute and easy to play around with and if done right it can give a nice finishing touch to your site.

Develop amazing web layouts on your 8GB Acer Aspire computer using an advanced Adobe contribute CS5 and an upgradable flash software.

STEP 1

Gather your files

Lets get started.

  • Create a new root folder, name it as you wish.
  • Within that folder create a HTML File called index.html, also a CSS file and a JS File.
  • Finally create a folder called images.

You should use your own images for whatever purpose you use this tutorial for or you are free to use the ones provided in the download.

STEP 2

Create the HTML Markup

We are going to start off with a very basic HTML structure which we will add to later in the tutorial. Copy and paste the code below into your index.html file:

<!doctype html>
<html>
<head>
<title>jQuery Sliding Doors Tutorial | The Finished Box</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>

Attach the CSS File

Underneath the title tag add the following:

<link rel="stylesheet" href="style.css" />

Attach the JS File

Underneath the stylesheet you just added insert the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="custom.js"></script>

In this tutorial we will be referencing the Google jQuery API to load jQuery. If you want to download the latest version of jQuery for offline purposes you can download it here.

Add the body elements

Now that we have everything going according to plan, we shall add the following div’s within the container:

<div id="vertical" class="third">
<img src="images/underlay.jpg" />
<img src="images/image-1.jpg" class="top" />
</div>
<div id="left" class="third">
<img src="images/underlay.jpg" />
<img src="images/image-2.jpg" class="top" />
</div>
<div id="bottom-left" class="third last">
<img src="images/underlay.jpg" />
<img src="images/image-3.jpg" class="top" />
</div>
<div id="bottom" class="third">
<img src="images/underlay.jpg" />
<img src="images/image-4.jpg" class="top" />
</div>
<div id="right" class="third">
<img src="images/underlay.jpg" />
<img src="images/image-5.jpg" class="top" />
</div>
<div id="bottom-right" class="third last">
<img src="images/underlay.jpg" />
<img src="images/image-6.jpg" class="top" />
</div>
</div>

Each div I assigned a unique ID which we will refer to later in jQuery to give a seperate animation, also I assigned a class to each of them called third so we can give them each a style. The class last is for alignment purposes of this tutorial.

Within these div’s I have 2 images, one of them has the class top assigned to it, this is the one that will be animated. The other image is the one that is underneath it.

You should now have something that looks like this:




jQuery Sliding Doors Tutorial | The Finished Box
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="custom.js"></script>
<div id="container">
<div id="vertical" class="third"><img src="images/underlay.jpg" alt="" />
<img class="top" src="images/image-1.jpg" alt="" /></div>
<div id="left" class="third"><img src="images/underlay.jpg" alt="" />
<img class="top" src="images/image-2.jpg" alt="" /></div>
<div id="bottom-left" class="third last"><img src="images/underlay.jpg" alt="" />
<img class="top" src="images/image-3.jpg" alt="" /></div>
<div id="bottom" class="third"><img src="images/underlay.jpg" alt="" />
<img class="top" src="images/image-4.jpg" alt="" /></div>
<div id="right" class="third"><img src="images/underlay.jpg" alt="" />
<img class="top" src="images/image-5.jpg" alt="" /></div>
<div id="bottom-right" class="third last"><img src="images/underlay.jpg" alt="" />
<img class="top" src="images/image-6.jpg" alt="" /></div>
</div>
STEP 3

Add the CSS

Now that we have our markup ready it’s time to style it up, there’s isn’t much CSS to this tutorial, regardless, add the following to your CSS file:

html,body{margin:0;padding:0;background:#e8e8e8}

#container { width:960px; margin:0 auto; padding-top:150px }

.third {
width:293px;
margin:0 40px 40px 0;
overflow:hidden;
float:left;
position:relative;
}

.third img { display:block; }

.top { position:absolute; top:0; left:0; z-index:20 }

.last { margin-right:0; }

The important thing is that you have overflow:hidden on your div that contains the image, that way when we animate the image with the class of top it wont show outside of the div leaving you with a great effect.

STEP 4

Time for the jQuery

Now we are going to animate the image’s using jQuery. This part is relatively simple and will make more sense to you when you start playing around with it. First off, open up your JS File you created.

Create a function

$(function() {
// js code here
});

Whatever JavaScript you put inside that function will load when the DOM is ready.

Adding the animation

Now we will add the animation for the div with the ID of bottom-left, insert the following code inside your function:

$('#bottom-left').hover(function() {
//hover on
$('img.top', $(this)).stop().animate({left: '-293px', top: '188px'}, 500);
},function() {
//hover off
$('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
});

Each time the div bottom-left is hovered it will find the image with the class of top relative to bottom-left (in this case $(this) refers to #bottom-left). Then if there is anything in the queue it will be stopped, finally it will animate -293px from the left and 188px from the top giving you a nice swish effect. 500 refers to the duration of the animation, change it to whatever you desire. When you hover off the div bottom-left the image will animate to its natural state also at the duration of 500.

Here’s the code I used for the other div’s, you can play around with the top and left positions to create different effects:

$('#vertical').hover(function() {
$('img.top', $(this)).stop().animate({top: '188px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({top: '0'}, 500);
});

$('#left').hover(function() {
$('img.top', $(this)).stop().animate({left: '-293px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({left: '0'}, 500);
});

$('#bottom').hover(function() {
$('img.top', $(this)).stop().animate({top: '-188px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({top: '0'}, 500);
});

$('#right').hover(function() {
$('img.top', $(this)).stop().animate({left: '293px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({left: '0'}, 500);
});

$('#bottom-right').hover(function() {
$('img.top', $(this)).stop().animate({left: '293px', top: '188px'}, 500);
},function() {
$('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
});

That’s all there is to it!

Hopefully now you have a better understanding of how to use jQuery to obtain great effects and can go onto learning how to push these even further. If you followed the tutorial step by step with any luck you would have ended up with a result something like this.

If you have anything to add to the tutorial or want to show us something you came up with let us know in the comments below and we’ll get back to you. Good luck!

Connect to the author

I am the founder of The Finished Box, a Digital Resource Magazine. Founded in October 2010 and launched in February 2011 my focus is to bring you articles, inspiration, freebies and more focusing on quality more than quantity.

  • Harm10

    Seems very worthwhile! I am gonna try it!

    BTW the link at the end of the tutorial (“result something like this”) is incorrect.

  • Anonymous

    Hey, good luck and let me know how it goes!

    Thanks for letting me know about the link, I’d never have noticed that! (I recently switched hosting)

  • http://www.dynamicwp.net/articles-and-tutorials/best-tutorials-jquery-sliding-door/ Create a jQuery Sliding Door Effect – 10 Best jQuery Tutorials

    [...] Tutorial Demo [...]

  • http://wphub.biz/create-a-jquery-sliding-door-effect-%e2%80%93-10-best-jquery-tutorials/ Create a jQuery Sliding Door Effect – 10 Best jQuery Tutorials | WPhub.biz

    [...] Tutorial Demo [...]

  • Ista

    Love this! I tried using 3x doors of the same kind, but only one seems to work. Any ideas what i am doing wrong?

  • Yoladango

    Really easy-to-follow tutorial! Thanks for taking the time to make this.

  • http://blogfreakz.com/ Blogfreakz Web Design

    This is awesome looking for this kind of jQuery and you really help me a lot thanks for sharing this one

  • Voxs

    wonderful!
    but how to stop the animation after opening and don´t let the slide go back again?
    I like to vreate a webpage front-site with closed doors and after “opening the doors” there should be the content visible. does someone have suggestions, please? thanks a lot, cheers!

  • Anonymous

    Can we do that effect onclick?

  • http://designintense.com Eliza Alys Young

    I’m trying to adapt this so that it creates the effect of opening a gate when you rollover the images. I have gotten this far: http://oneonmarlin.com/slide_test/
    but what I want is for both sides of the “gate”, in this case the logo,
    to open at the same time and reveal the two underlay images and then close at the same time. Any assistance in this would be much appreciated.

  • https://www.facebook.com/nesticle8bit nesticle8bit

    Sure, just change hover() to click()

    ex:
    $(‘#vertical’).hover(function() {}

    to

    $(‘#vertical’).click(function() {}

blog comments powered by Disqus