QuenesにThe Easiest Javascript Sliding Door Effect Tutorial with jQueryとして
jQueryを使った簡単なエフェクトが紹介されています。






>>DEMO

HTML

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

CSS

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}

JavaScript

$(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');
	});
	
});

The Easiest Javascript Sliding Door Effect Tutorial with jQuery