CODEWITHSUNDEEP
jqueryhtmlcss
user2810762
user2810762

Reputation: 395

Infinite loop on animate

I need a div to slide out the left of the screen and when the width is done it must restart. e.g. like its running in a circle endlessly.

I have managed to find this after searching stackoverflow. 

jQuery(".slide-inner").animate({left: -9913}, 80000, 'linear');

9913 being the current width of my div in px. right now it just finishes the 9913 width and then ends the animation, it need to start over again without showing white space e.g. when it hits the final pixel in 9913 it must start from 1px all over again.

My html:

<div class="slide-inner">
<div class="one ani"></div>
<div class="two ani"></div>
<div class="three ani"></div>   
<div class="four ani"></div>
<div class="five ani"></div>
<div class="six ani"></div>
</div>

Ignore the elements inside .slide-inner. Those are just absolute position divs that i am using with css3 to light up the slider at keypoints.

EDIT:

var animate = function() {
  $(".slide-inner").animate({left: -9913}, 80000, 'linear', function() {
  $(this).css('left', 1);
  animate();
 });
}
animate();

Problem with above code is left', 1) needs to be responsive so i cant put in there -1920 and then on browser resize it will not function like it should?

Upvotes: 0

Views: 907

Answers (2)

demonofthemist
demonofthemist

Reputation: 4199

One way to achieve this is to use background-image & background-repeat:repeat-x; for your div. Then you can animate background-position property of div & get desired effect.

Suppose your div width is 1920px, then animate from background-position:0px 0px to background-position:-1920px 0px;.

function animate() {
  $(".slide-inner").animate({'background-position':'0px -1920px'}, 80000, 'linear', function() {
    $(this).css('background-position','0px 0px');
    animate();
  });
}
animate();

Upvotes: 0

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

It sounds like what you want is a callback for animate(), combined with a function that performs the animation i.e. a recursive function.

var animate = function() {
  $(".slide-inner").animate({left: -9913}, 80000, 'linear', function() {
    $(this).css('left', 1);
    animate();
  });
}
animate();

I've thrown together a really basic fiddle to demonstrate this technique: http://jsfiddle.net/6mfCx/

Upvotes: 2

Related Questions