Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery Simple Animation, restart when finished

Posted on 2011-09-15
12
Medium Priority
?
285 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 2000 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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

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!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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).
Suggested Courses

618 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