jQueryで作るホバーすると4分割にスライドするアニメーションのスクリプト[js]

js0910041.jpg

Quenessより、jQueryで作るホバーすると4分割にスライドするアニメーションのスクリプトの紹介です。

デモページはコチラから

js0910042.jpg

デモページでも分かるとおり、このスクリプトのイメージは上図の通りです。

以下マークアップ例です。

HTML

<div class="qitem">
	<a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

jQuery

	
$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 1000;
	var speed_out = 300;	

	//Calculation for corners
	var neg = Math.round($('.qitem').width() / 2) * (-1);	
	var pos = neg * (-1);	
	var out = pos * 2;
	
	$('.qitem').each(function () {
	
		//grab the anchor and image path
		url = $(this).find('a').attr('href');
		img = $(this).find('img').attr('src');
		
		//remove the image
		$('img', this).remove();
		
		//append four corners/divs into it
		$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
		
		//set the background image to all the corners
		$(this).children('div').css('background-image','url('+ img + ')');

		//set the position of corners
		$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});	
		$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});	
		$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});	
		$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});	

	}).hover(function () {
	
		//animate the position
		$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});	
		$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});	
				
	},
	
	function () {

		//put corners back to the original position
		$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});	
	
	}).click (function () {
		
		//go to the url
		window.location = $(this).find('a').attr('href');	
	});

});