Hello friends,

If you want to make an animation like transition on your multiple views or If you want to slide your view i.e. your DIV element from one to another, you can use the following code.

In this we have all the content in inside UL and on click of left and right arrows, we can move the DIV  left and right.

Please find the code below:

HTML:

<div class="outerSlider">    
		<div class="slider12">
			<span class="leftArrow" onclick="changeIndex(-1)"></span>
	        <span class="rightArrow" onclick="changeIndex(1)"></span>
			<ul>
				<li class="one">
					<input type="text" />
					<input type="text" />
					<input type="text" />
				</li>
				<li class="two">
					<input type="text" />
					<input type="text" />
					<input type="text" />
				</li>
				<li class="three">
					<input type="text" />
					<input type="text" />
					<input type="text" />
				</li>
				<li class="four">
					<input type="text" />
					<input type="text" />
					<input type="text" />
				</li>
				<li class="five">
					<input type="text" />
					<input type="text" />
					<input type="text" />
				</li>
			</ul>
		</div>
	</div>

CSS:

.slider12{overflow: hidden;}
.slider12 ul{ max-width: 2000px;width: 2000px; left:-10px; margin:0px; overflow: hidden; position:relative;padding-left: 0;}
.slider12 ul li{ background: #999;list-style-image: none !important; list-style:none; float:left; width:345px; margin-left: 10px; cursor: pointer; padding:5px; color:#fff;}
.outerSlider{ width:355px; position:relative; margin: 0 auto}
.toolTip{display:none}
.leftArrow{ position: absolute; top:58px; left:-30px; width:15px; height:22px; background:url(leftArrow.png); z-index: 99; cursor: pointer}
.rightArrow{ position: absolute; top:58px; right:-20px; width:15px; height:22px; background:url(rightArrow.png); z-index: 99; cursor: pointer}

Jquery:

    var globalIndex = 0;
	function  changeIndex(pos) {
		globalIndex = globalIndex + pos;
		console.log(globalIndex);
		if (globalIndex > 0 && globalIndex <= 4) {
			console.log("globalIndex : "+globalIndex);
			var left = globalIndex * 365;
			console.log(left);
			$(".slider12 ul").animate({
				"left": "-"+left
			});
		} else if(globalIndex <= 0 && globalIndex >= -4) {
			console.log("globalIndex : "+globalIndex);
			var left = globalIndex * 365;
			console.log(left);
			$(".slider12 ul").animate({
				"left": "+"+left
			});
		}
	}

With the help of the following code you can make you view animate and display the other view.

You can also find the attached demo.