jQuery – Sliding div Example

There are some jQuery plugins such as jQuery Cycle Plugin which makes website animation simple. The following HTML is a sliding div example without using other plugins. it maybe not good for use but it would be a nice example for beginners to try the power of jQuery.

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
		<style type="text/css">
			body {
				text-align: center;
			}
			
			.main {
				width: 500px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.moving-div {
				width: 100px;
				height: 100px;
				float: right;
				position: relative;
			}
			
			.moving-div-1 {
				background-color: red;
			}
			
			.moving-div-2 {
				background-color: orange;
			}
			
			.moving-div-3 {
				background-color: yellow;
			}
			
			.moving-div-4 {
				background-color: green;
			}
			
			.moving-div-5 {
				background-color: blue;
			}
		</style>
		
		<script type="text/javascript">
			var timer;
			var temp;
			var offset;
			
			$(document).ready(function() {
				timer = setTimeout(startSlide, 3000);
			});
			
			function startSlide() {
				$(".moving-div").animate(
					{right: '+=100px'},
					2000,
					"linear",
					endSlide
				);
			}
			
			function endSlide() {
				temp = parseInt($(this).attr('value')) + 100;
				$(this).attr('value', temp);
				
				offset = $(this).attr('value');
				if (offset >= 500) {
					$(this).attr('value', 0);
					if ($(this).is('.moving-div-1')) {
						$(this).animate(
							{right: '0px'},
							1000
						);
					} else if ($(this).is('.moving-div-2')) {
						$(this).animate(
							{right: '-100px'},
							1000
						);
					} else if ($(this).is('.moving-div-3')) {
						$(this).animate(
							{right: '-200px'},
							1000
						);
					} else if ($(this).is('.moving-div-4')) {
						$(this).animate(
							{right: '-300px'},
							1000
						);
					} else if ($(this).is('.moving-div-5')) {
						$(this).animate(
							{right: '-400px'},
							1000
						);
					}
					
					timer = setTimeout(startSlide, 3000);
				} 
			}	
		</script>
	</head>
	<body>
		<div class="main">
			<div class="moving-div moving-div-1" value="0">		
			</div>
			<div class="moving-div moving-div-2" value="100">		
			</div>
			<div class="moving-div moving-div-3" value="200">		
			</div>
			<div class="moving-div moving-div-4" value="300">		
			</div>
			<div class="moving-div moving-div-5" value="400">		
			</div>
		</div>
	</body>
</html>

 

If you want to reverse the direction, just replace all the left with right.

Done =)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.