The Easiest Javascript Sliding Door Effect Tutorial with jQuery

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.

• Create a Vertical Sliding Bar Thumbnail Effect with jQuery
• Thumbnail Gallery with Slick Heading and Caption Effect with jQuery Tutorial
• jQuery Thumbnail with Zooming Image and Fading Caption Tutorial
• Create a Stunning Sliding Door Effect with jQuery

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 data-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

• 15+ CSS Tips and Tricks
• 15 Ways to Optimize CSS and Reduce CSS FIle Size

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

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial