I have developed a function to scroll multiple images horizontally in the header of my website. Inside my header, I have implemented code that looks like this:
<div class='images'> <!-- this div is 150% wide with overflow hidden -->
<img src=... /><img src=... /><img src=... /><img src=... />
</div>
This functionality is intended to operate as follows:
- Take the first image, utilize animation to scroll it out of view to the left (by adjusting its
margin-leftproperty). - Move the first image to the end (effectively shifting it and adding a new image at the beginning).
- Repeat the entire process.
The function I coded for this purpose is as follows:
function scroll()
{
var o = jQuery('.images').children().first();
var w = o.css('width');
var s = o.attr('src');
jQuery('.images:first-child').animate({'margin-left': "-"+w}, {'duration': 1000, 'complete': function(){
jQuery('.images').children().first().remove();
jQuery('.images').append("<img src='"+s+"' />");
scroll();}});
}
Currently, the function operates in the following manner: The first image animates correctly, but subsequent images do not scroll (the animation does not work). However, after 1000 ms, the first image moves to the end. So while the images are changing, the animations are not functioning as intended.
I suspect that the scroll() function is being called too soon, but I am unsure how to sequence it properly. Any suggestions on how to chain it appropriately?