Repeat function after callback without delay (Jquery)

Question

So I'm making this slideshow on my website. Right now it moves all pictures outside the screen to the left, appends the first item to the end of the container and then repeats. The thing is I had to set a timer bigger than the animation time or else it would every other time animate the wrong element. How can I make it repeat when the appendTo function is complete without having a delay?

What it looks like: https://gyazo.com/04b427117ee9d01f65fcdba790ec0730

Javascript:

$(function(){
setInterval(function(){
    var p = $(".photo-grid-slideshow .photo-crop").css('width');
    $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 3000, "linear", function(){
        $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
    })
}, 3500);
});

You should add the working code snippet here or on jsfiddle.net. — sergdenisov
– sergdenisov, Commented Feb 1, 2016 at 17:10

juvian · Accepted Answer · 2016-02-01 17:10:30Z

2

Just run it again after your .appendTo:

$(function(){
  function animate(){
      var p = $(".photo-grid-slideshow .photo-crop").css('width');
      $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 3000, "linear", function(){
        $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
        animate(); // here we call it again
    })
  }
  animate(); // start animation
})

answered Feb 1, 2016 at 17:10

juvian

16.1k2 gold badges42 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jmcgriz Over a year ago

If you go down this route, you just need to make sure that the element exists before trying to animate it var $elem = $(".photo-grid-slideshow .photo-crop:first-of-type"); if($elem.length){ $elem.animate(...

Emric Månsson Over a year ago

Thank you! Works like a charm :)

jmcgriz · Accepted Answer · 2016-02-01 17:20:22Z

1

For an use case like this where you want to chain animations, using a library like GreenSock could be really helpful. An added benefit is that the animations will be much smoother and more customizable than using jQuery's native animate functionality.

As for your current implementation, it would be easier to provide help if you included a snippet of the HTML and CSS that goes along with your script.

answered Feb 1, 2016 at 17:20

jmcgriz

3,3981 gold badge11 silver badges16 bronze badges

Collectives™ on Stack Overflow

Repeat function after callback without delay (Jquery)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related