Slider

by lymustang

HTML

<body>
<div class="container center">
	
</div>

<div class="container right">
	
</div>
</body>

CSS

div.container {
	height: 95%;
	width: 95%;
	position: absolute;
}

div.container.center {
	background-color: red;
	left: 2.5%;
	top: 2.5%;
}

div.container.right {
	background-color: blue;
	left: 97.5%;
	top: 2.5%;
}

JavaScript

$("div.container.center").click(function() {
		
	$('div.container.center').animate({left: "-92.5%"})
		.delay(600)
		.queue(function(next) { $(this).attr('class','container right'); next(); })
		.queue(function(next) { $(this).css({left: "97.5%"}); next();
	});
		
	$('div.container.right').animate({left: "2.5%"})
		.delay(600)
		.queue(function(next) { $(this).attr('class','container center'); next(); })
		.queue(function(next) { $(this).css({left: "2.5%"}); next();
	});
});