EMB01
asked on
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:
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 });
});
});
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
okay in the animate method, reset the margin left
$(document).ready(function () {
animate();
});
function animate()
{
$("#slide").css("marginLef t","0px");
$("#slide").animate({margi nLeft:'+=3 09px'},{ duration: 1000, queue: false }, function(){
animate();
});
}
$(document).ready(function
animate();
});
function animate()
{
$("#slide").css("marginLef
$("#slide").animate({margi
animate();
});
}
ASKER
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>
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>
ASKER
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...
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>
<<That only moves it the first time>>
Which browser have you tested on? here it is moving since i have posted you...unlimited times
Which browser have you tested on? here it is moving since i have posted you...unlimited times
ASKER
I'm testing on firefox. I got it finally, but you helped me, so I'll give you points :) Thank you.
finished code:
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
thanks for the correct solution. Do you need any more help?
ASKER
didnt provide actual solution but got me closer to doing so.
http://api.jquery.com/animate/