Solved

jQuery Simple Animation, restart when finished

Posted on 2011-09-15
12
258 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Increase the size of the modal in Bootstrap 5 25
Need Help adding an array and loop to a React file 7 27
How can i  prevent default  Submision? 6 26
Jquery 2 11
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

770 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