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
Solved

jQuery Simple Animation, restart when finished

Posted on 2011-09-15
12
261 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 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