Question

I am trying to create a sort of slideshow animation. I have the codes here: jsFiddle.

These tablets would rotate around.

The problem is that, at random times, the animation will move out of line. The wrong tablets undergo wrong animations. Here are the screenshots:

And this is how it looks like when the animations goes wrong

The main problem is I don’t understand why the animation would go wrong random times. In my computer it will run properly for hours, but in other cases (especially on Safari).

Answer 1

You could store the expected final css values for each animated el and then in the animate callback set these values, so for each animated el something like

var el = $(selector);

el.data("finalCSS", { your expected final CSS values })

$("selector").animate({animation properties}, function() {
     el.css(el.data("finalCSS")).data("finalCSS", undefined);
})

This doesn’t help with figuring out why it’s happening (but I can’t recreate the issue myself), but provides a failsafe to make sure the layout doesn’t break;