I'm having an issue with a looping animation, seen here--
It works like this--
The 'wave' image, which is symmetrical and exactly twice the width of the content div, is right-aligned with the content div. It's animated so that it moves right until it's left-aligned. By looping this animation you create the illusion of a continuous wave motion.
The problem is that it accelerates, decelerates, then pauses with each animation loop. I need it to move, without pause, at a constant speed.
Here's the jquery--
$(document).ready(function() {
setTimeout("wave()", 0);
});
function wave(){
$("#wave")
.animate({left:"0px" },2000).animate({left:"-760px"}, 0)
setTimeout("wave()")
}
Here's the css--
#wrapper {
margin:0px auto;
width:760px;
}
#content {
position: relative;
width: 760px;
height: 210px;
top: 30px;
overflow: hidden;
border: 0px solid #f5f5f5;
background: url('images/scene_bg.jpg');
}
#wave {
position: absolute;
top: 80px;
left: -760px;
}
Here's the html--
<div id="wave"><img src="images/wave.png"></div>
</div>
</div>
I've pretty much fudged it so that it immediately 'snaps' back to its initial location before it loops by animating it left at a duration of 0 milliseconds. Not exactly the most sophisticated solution.