Solved

jQuery Simple Animation, restart when finished

Posted on 2011-09-15
12
262 Views
Last Modified: 2012-06-21
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
Comment
Question by:EMB01
  • 6
  • 6
12 Comments
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 500 total points
ID: 36544466
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36544475
check the complete method option of animate method
http://api.jquery.com/animate/
0
 
LVL 14

Author Comment

by:EMB01
ID: 36544492
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!

 
LVL 40

Expert Comment

by:gurvinder372
ID: 36544521
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
 
LVL 14

Author Comment

by:EMB01
ID: 36544560
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36544620
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
 
LVL 14

Author Comment

by:EMB01
ID: 36544672
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36544691
<<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
 
LVL 14

Author Comment

by:EMB01
ID: 36544744
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
 
LVL 14

Accepted Solution

by:
EMB01 earned 0 total points
ID: 36544781
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36544905
thanks for the correct solution. Do you need any more help?
0
 
LVL 14

Author Closing Comment

by:EMB01
ID: 36565484
didnt provide actual solution but got me closer to doing so.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question