Interval for each element
Hello,
At the moment i got this:
http://lutrasoft.nl/jQuery/textScroller/
But now i create a interval with the call of a function that does a each for each of my elements. But as you can see it got some lag. Because it moves all on each inteval. What i want is a interval for each element. So i got 3 elements i need 3 intervals. So they can move smoothly. The problem is if i call the function in the .each on the init. The function will only be called by the last element in the array.
Example is at the url above.
How i got it now:
- return this.each(function(i) {
$(this).attr("elementScroller", true);
setInterval(moveAll, options.delay);
return this;
});
function moveAll()
{
$("[elementScroller]").each(function(){
var intend = parseInt($(this).css("text-indent"));
var move = intend - options.pxPerDelay;
// If whole element is moved
// Move this element to back and set text-indent to 0
if(move < 0-$(this).find(":first-child").innerWidth())
{
$(this).append($(this).find(":first-child"));
$(this).css("text-indent",0);
}
$(this).stop(true, false).animate({"text-indent" : move}, options.delay);
});
}
How i would like it to work:
- return this.each(function(i) {
setInterval(moveAll, options.delay);
return this;
});
function moveAll()
{
var intend = parseInt($(this).css("text-indent"));
var move = intend - options.pxPerDelay;
// If whole element is moved
// Move this element to back and set text-indent to 0
if(move < 0-$(this).find(":first-child").innerWidth())
{
$(this).append($(this).find(":first-child"));
$(this).css("text-indent",0);
}
$(this).stop(true, false).animate({"text-indent" : move}, options.delay);
}
So bind the interval to the element. But how?
Cheers,
Niels