スライドすると、内容を左右から押しつぶして、次の内容が左右の重りをはじき返すようなスライドをjQueryで作ってみました。

クリックするとスライドします。

↓以下が実際のソースサンプルです。

<script>
$(function () {
	$("#main").prepend("<div class='left'></div><div class='right'></div>");
	$(".left").css({
		"left": "0%",
		"margin-left": "-" + $(".left").width() + "px"
	});
	$(".right").css({
		"left": "100%",
		"margin-left": "0"
	});
	$(".box").css({
		"position": "absolute",
		"left": "50%",
		"margin-left": "-" + ($(".box:eq(0)").width() / 2) + "px"
	});
	$(".box:gt(0)").css({
		"display": "none"
	});

	$(".box").click(function () {
		var $this = $(this),
			$thisNextBox = $("+.box", this),
			$thisNextBoxWidth = $thisNextBox.width();

		$(".left").css({
			"left": "0%",
			"margin-left": "-" + $(".left").width() + "px"
		});
		$(".right").css({
			"left": "100%",
			"margin-left": "0"
		});
		$(".box").css({
			"position": "absolute",
			"left": "50%",
			"margin-left": "-" + ($(".box:eq(0)").width() / 2) + "px"
		});
		$(".box:gt(0)").css({
			"display": "none"
		});

		$(".left").animate({
			"left": "50%",
			"margin-left": "-" + ($(".left").width() + ($this.width() / 2)) + "px"
		}, function () {
			$this.animate({
				"width": "0",
				"margin-left": "0",
			}, 1500);
			$(".left").animate({
				"left": "50%",
				"margin-left": "-" + $(".left").width() + "px"
			}, 1500, function () {
				$this.css({
					"width": "",
					"margin-left": "",
					"display": "none"
				}).appendTo("#main");
				$thisNextBox.css({"width":"0", "display": "block", "margin-left": "0"}).animate({
					"width": $thisNextBoxWidth + "px",
					"margin-left": "-" + ($thisNextBoxWidth / 2) + "px",
				});
				$(".left").animate({
					"left": "0%",
					"margin-left": "-" + $(".left").width() + "px"
				});
				$(".right").animate({
					"left": "100%",
					"margin-left": "0"
				});
			});
			$(".right").animate({
				"left": "50%",
				"margin-left": "0"
			}, 1500);
		});
		$(".right").animate({
			"left": "50%",
			"margin-left": ($this.width() / 2) + "px"
		});
	});
});
</script>

<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		body {
			overflow: hidden;
		}

		#main {
			width: 100%;
			font-size: 3em;
			font-weight: bold;
			text-align: center;
		}

		.box {
			overflow: hidden;
		}

		#box1 {
			display: block;
			background: #f00;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box2 {
			display: block;
			background: #0f0;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box3 {
			display: block;
			background: #00f;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box4 {
			display: block;
			background: #ccc;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box3 img {
			width: 100%;
			height: auto;
		}

		.left,
		.right {
			position: absolute;
			display: block;
			background: #000;
			width: 500px;
			height: 500px;
		}
</style>

<div id="main">
		<div id="box1" class="box">テキストいち！</div>
		<div id="box2" class="box">:)</div>
		<div id="box3" class="box"><img src="image/topimg3.jpg"></div>
		<div id="box4" class="box"></div>
</div>

デモページは、こちら