Tutorials

The Easiest Javascript Sliding Door Effect Tutorial with jQuery

Written by Kevin Liew on 26 Jan 2010
81,370 Views • Shares
13 comments

Introduction

This is my fouth tutorial about thumbnail effect. This time is the well known sliding door effect that slide the top layer to top, bottom, left or right direction to reveal the content underneath.

Just in case sliding door effect isn't your cup of tea, you can try the following tutorials for different kind of cool effect.

This is how it looks like:

Otherwise, let's start this tutorial from HTML code first.

1. HTML

Yep, it's simple and self-explanatory! :) We are not using UL List here because I think it wouldn't be appropriate and it's harder to make a 3x3 layout.

<div class="eff">
	<img src="image.gif" alt="Test 1" title="" width="126" height="126"><div class="caption">
<a href="http://www.queness.com" class="header">Header</a><p>Description</p>
</div>
</div>

2. CSS

I have added huge amount of comments, what we have to understand are:

  • If we want to use position absolute, we need to declare position relative for its parent.
  • If we use float, we need to put display:inline to fix IE bug
  • We have to ensure the image will have higher z-index than the caption
If you wish to learn more about CSS tips & tricks and optimization, read two of my famous posts:
body {
	font-family:arial;	
}


.eff {
	
	/* the image size is 126x126, it's adjusted to fit the border as well*/
	width:136px;
	height:136px;

	/* important, allow the children object to move inside its parent obj */
	position:relative;	

	/* important, it hides the moved image */
	overflow:hidden;
	
	/* with the clear class, make it into 3 x 3 layout */
	float:left;
	
	/* IE float bug fix */
	display:inline;
	
	/* styling */
	margin:8px;
	font-size:12px;
}

.eff img {
	display:block;
	width:126px;
	height:126px;
	
	/* styling */
	text-decoration:none;
	border:4px solid #ccc;
	background:#ddd;

	/* important, it allows this obj to move by jquery */
	position:absolute;
	
	/* make sure it appears above the caption */
	z-index:500;
	
	cursor:pointer; cursor:hand;
}


.eff .caption {
	/* should be the same size with the image */
	width:126px;
	height:126px;
	
	/* styling */
	background:#333;
	border:4px solid #ccc;
	color:#eee;
	
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}


/* extra styling*/

.eff .caption a.header {
	margin:10px 5px 5px 5px;
	display:block;
	font-size:14px;	
	font-weight:700;
	color:#4ed7f4;
}

.eff .caption p {
	margin:5px;	
}

.clear {clear:both}

3. Javascript

I was trying to make it more flexible by letting user define the sliding direction of the thumbnail for each of the items, but somehow it doesn't work. What I did, I put a class for the item and it has value left, right, top or bottom and then, the jquery will grab the value and hence, it will able to know the direction of the item. But, unfortunately, it doesn't work. Apparently, if you put variable as the property, animate() won't interpret it. I could be wrong, but if you have solution, do let me know.

This is the more flexible script I was trying to implement, but it doesn't work :(

I know there is a way to make it work, by using if else statement, the final code will look stupid because of the amount of code redundancy.

$('.eff').hover(
	function () {
		direction = $(this).find('img').attr('class');  //should be either top, bottom, left or right
		value = ((direction =='top' || direction=='bottom') ? $(this).find('img').outerHeight() * -1 : $(this).find('img').outerWidth() * -1);
		$(this).find('img').stop().animate({direction: value} ,{duration:500, easing: 'easeOutBounce'});
	},
	function () {
		direction = $(this).find('img').attr('class');
		$(this).find('img').stop().animate({direction:0} ,{duration:500, easing: 'easeOutBounce'});	
	});
);

And, this is the script that actually working, but all items will have to be the same transition:

$(document).ready(function() {

	//if mouse over and mouse out
	$('.eff').hover(
	function () {

		value = $(this).find('img').outerHeight() * -1;

		//for left/right if you have different width and height, 
		//commented out because we are using up/down in this example
		//value = $(this).find('img').outerWidth() * -1); 
		
		//animate the image
		//you can change the sliding direction by changing bottom to left, right or top
		//if you changed this, you will have to change the position of the hover out as well
		$(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});	
		
	},
	function () {
		
		//reset the image
		//the position property (bottom), it must be same with the on in the mouseover
		$(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});	
	
	});
	
	//if user clicked on the thumbnail
	$('.eff').click(function () {	
		//grab and execute the first link in the thumbnail
		window.location = $(this).find('a:first').attr('href');
	});
	
});

Conclusion

I hope you will able to learn something from this script or perhaps use it in your website :) I you have the solution of my problem. Do let me know! :) Thanks

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

13 comments
Kristel van den Akker 7 years ago
Great one! thanx :D
Reply
cyberfox 7 years ago
Very Nice!
Reply
Webstandard-Team 7 years ago
nice little tut, thx for sharing
Reply
Sven 7 years ago
nice little tut, thx!
Reply
Slobodan Kustrimovic 7 years ago
Cool. Thanks Kevin.
Reply
Colorblind 7 years ago
Fantastic! Thanks. I've used your tutorial on my website www.cubereflect.com
Orange Vision :)
Reply
Mahbub 7 years ago
Gerardo 5 years ago
Yours is more amazing and attractive!
Reply
juanjo 7 years ago
thanks for the tutorial! very useull!
Reply
Daniel Bidmon 7 years ago
This is a very nice effect!
Want to use it in future projects
Reply
Toni 6 years ago
THX for that great Tut !
But I have a little problem. How can i open the Links in a new window ?
target="_blank" doesn´t work :-(
Hope you can help me.

THX greetz from cold germany
Toni
Reply
kevin Admin 6 years ago
Hi Toni, can you remove this line of code:
//if user clicked on the thumbnail
$('.eff').click(function () {
//grab and execute the first link in the thumbnail
window.location = $(this).find('a:first').attr('href');
});

after that, just use target=_blank, it should work because that line of code take over the default behaviour of target.
Reply
Anirudh 4 years ago
Thanx for tutorial...
Reply