[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 293
  • Last Modified:

jQuery Simple Animation, restart when finished

In the attached code, I am animating a div from left to right.  How can I animate it every three seconds, then restart when it's reached the end (so it looks seemless)?

HTML:
            <div class="frame">
                  <div class="subframe">
                        <div id="slide" class="slide" style="margin-left: 0px;"><span>Lorem ipsum</span><br />dolor lorem</div>
                  </div>
            </div>

CSS:
                  .frame { overflow: hidden; width: 468px; height: 60px; background: url('bg2.jpg'); }
                  .subframe { width: 309px; overflow: hidden; }
                  .slide { font-family: arial; font-size: 14px; padding: 5px; margin-top: 8px; text-align: center; width: 309px; line-height: 18px; }
                  .slide span { font-weight: bold; font-size: 16px; }

Javascript:

$(document).ready(function() {
	$(function(){
		$("#slide").animate({marginLeft:'+=309px'},{ duration: 1000, queue: false });				   
	});
});

Open in new window

0
EMB01
Asked:
EMB01
  • 6
  • 6
2 Solutions
 
Gurvinder Pal SinghCommented:
replace
$(document).ready(function() {
      $(function(){
            $("#slide").animate({marginLeft:'+=309px'},{ duration: 1000, queue: false });                          
      });
});

by

$(document).ready(function() {
       
      animate();
});

function animate()
{
            $("#slide").animate({marginLeft:'+=309px'},{ duration: 1000, queue: false }, function(){
                      animate();
               });                              
}
0
 
Gurvinder Pal SinghCommented:
check the complete method option of animate method
http://api.jquery.com/animate/
0
 
EMB01Author Commented:
Thank you but it doesn't seem to restart, it just stays where it is moved.  I want to scroll three different texts.  Probably, three DIVs inside the "#slide" div.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Gurvinder Pal SinghCommented:
okay in the animate method, reset the margin left


$(document).ready(function() {
       
      animate();
});

function animate()
{
            $("#slide").css("marginLeft","0px");
            $("#slide").animate({marginLeft:'+=309px'},{ duration: 1000, queue: false }, function(){
                      animate();
               });                              
}
0
 
EMB01Author Commented:
It still doesn't restart.  Feel free to use my code to test.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Blank XHTML 1 Transitional Page</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				   
				  animate();
			});

			function animate()
			{
						$("#slide").css("marginLeft","0px");
						$("#slide").animate({marginLeft:'+=309px'},{ duration: 1000, queue: false }, function(){
								  animate();
						   });                              
			}
		</script>
		<style type="text/css">
			.frame { overflow: visible; width: 468px; height: 60px; background: url('bg2.jpg'); }
			.subframe { width: 309px; height: 50px; overflow: visible; }
			.slide { font-family: arial; font-size: 14px; padding: 5px; margin-top: 8px; text-align: center; width: 309px; line-height: 18px; }
			.slide div { float: left; width: 309px; background: red; }
			.slide div span { font-weight: bold; font-size: 16px; }
		</style>
	</head>
	<body>
		<button id="clicky">slide it</button>
		<div class="frame">
			<div class="subframe">
				<div id="slide" class="slide" style="margin-left: 0px;">
					<div><span>Lorem ipsum</span><br />dolor lorem</div>
					<div><span>Lorem ipsum</span><br />dolor lorem</div>
					<div><span>Lorem ipsum</span><br />dolor lorem</div>
				</div>
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
this one is working for me
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Blank XHTML 1 Transitional Page</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				   
				  animateIt();
			});

			function animateIt()
			{
						//alert($("#slide").css("margin-left"));
						$("#slide").css("margin-left","0px");
						$("#slide").animate({marginLeft:'+=309px'}, 1000, animateIt);                              
			}
		</script>
		<style type="text/css">
			.frame { overflow: visible; width: 468px; height: 60px; background: url('bg2.jpg'); }
			.subframe { width: 309px; height: 50px; overflow: visible; }
			.slide { font-family: arial; font-size: 14px; padding: 5px; margin-top: 8px; text-align: center; width: 309px; line-height: 18px; }
			.slide div { float: left; width: 309px; background: red; }
			.slide div span { font-weight: bold; font-size: 16px; }
		</style>
	</head>
	<body>
		<button id="clicky">slide it</button>
		<div class="frame">
			<div class="subframe">
				<div id="slide" class="slide" style="margin-left: 0px;">
					<div><span>Lorem ipsum</span><br />dolor lorem</div>
					<div><span>Lorem ipsum</span><br />dolor lorem</div>
					<div><span>Lorem ipsum</span><br />dolor lorem</div>
				</div>
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
EMB01Author Commented:
That only moves it the first time, but it needs to move three times; please try my updated code.

Problem is, I can't reset it...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Blank XHTML 1 Transitional Page</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				   
				  animate();
			});

			function animate()
			{
						$("#slide").css("marginLeft","-618px");
						var $count = 0;
						setInterval(function() {
							if ($count < 3) {
								$("#slide").animate({marginLeft:'+=309px'},{ duration: 1000, queue: false }, function(){
									$count++;
									animate();
								});
							} else {
								$("#slide").css("marginLeft","-927px");
								$count = 0;
							}
						}, 3000);
			}
		</script>
		<style type="text/css">
			.frame { overflow: visible; width: 468px; height: 60px; background: url('bg2.jpg'); }
			.subframe { width: 309px; height: 50px; overflow: visible; }
			.slide { font-family: arial; font-size: 14px; padding: 5px; margin-top: 8px; text-align: center; width: 927px; line-height: 18px; }
			.slide span { float: left; width: 309px; background: red; }
			.slide span span { font-weight: bold; font-size: 16px; }
		</style>
	</head>
	<body>
		<button id="clicky">slide it</button>
		<div class="frame">
			<div class="subframe">
				<div id="slide" class="slide" style="margin-left: 0px;">
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
				</div>
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
<<That only moves it the first time>>
Which browser have you tested on? here it is moving since i have posted you...unlimited times
0
 
EMB01Author Commented:
I'm testing on firefox.  I got it finally, but you helped me, so I'll give you points :)  Thank you.

finished code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Blank XHTML 1 Transitional Page</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				   
				  animate();
			});

			function animate()
			{
						$("#slide").css("marginLeft","-618px");
						var $count = 0;
						setInterval(function() {
							if ($count < 2) {
								$("#slide").animate({marginLeft:'+=309px'},'slow', function(){
									$count++;
								});
							} else {
								$("#slide").css("marginLeft","-927px");
								$("#slide").animate({marginLeft:'+=309px'},'slow', function(){
									$count = 0;
								});
							}
						}, 3000);
			}
		</script>
		<style type="text/css">
			.frame { overflow: visible; width: 468px; height: 60px; background: url('bg2.jpg'); }
			.subframe { width: 309px; height: 50px; overflow: visible; }
			.slide { font-family: arial; font-size: 14px; padding: 5px; margin-top: 8px; text-align: center; width: 927px; line-height: 18px; }
			.slide span { float: left; width: 309px; background: red; }
			.slide span span { font-weight: bold; font-size: 16px; }
		</style>
	</head>
	<body>
		<button id="clicky">slide it</button>
		<div class="frame">
			<div class="subframe">
				<div id="slide" class="slide" style="margin-left: 0px;">
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
				</div>
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
EMB01Author Commented:
small bug detected.  where last frame would disappear.  fixed.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Blank XHTML 1 Transitional Page</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				   
				  animate();
			});

			function animate()
			{
						$("#slide").css("marginLeft","-618px");
						var $count = 0;
						setInterval(function() {
							if ($count < 2) {
								$("#slide").animate({marginLeft:'+=309px'},'slow', function(){
									$count++;
								});
							} else {
								$("#slide").animate({marginLeft:'+=309px'},'slow', function(){
									$("#slide").css("marginLeft","-927px");
									$("#slide").animate({marginLeft:'+=309px'},'slow', function(){
										$count = 0;
									});
								});
								
							}
						}, 3000);
			}
		</script>
		<style type="text/css">
			.frame { overflow: hidden; width: 468px; height: 60px; background: url('bg2.jpg'); }
			.subframe { width: 309px; height: 50px; overflow: hidden; }
			.slide { font-family: arial; font-size: 14px; padding: 5px; margin-top: 8px; text-align: center; width: 927px; line-height: 18px; }
			.slide span { float: left; width: 309px; }
			.slide span span { font-weight: bold; font-size: 16px; }
		</style>
	</head>
	<body>
		<button id="clicky">slide it</button>
		<div class="frame">
			<div class="subframe">
				<div id="slide" class="slide" style="margin-left: 0px;">
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
					<span><span>Lorem ipsum</span><br />dolor lorem</span>
				</div>
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
thanks for the correct solution. Do you need any more help?
0
 
EMB01Author Commented:
didnt provide actual solution but got me closer to doing so.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now