After some time, the animation begins to move

Question

I'm trying to create some kind of slideshow animation. I have codes here: jsFiddle .

These tablets will spin around.

The problem is that at random times the animation will fail. Wrong tablets undergo incorrect animation. Here are the screenshots:

And it looks like when the animation goes wrong.

The main problem is that I do not understand why the animation will be erroneous random time. It will work on my computer for several hours, but in other cases (especially Safari).

Answer 1

You can save the expected final css values ​​for each animated el, and then set these values ​​in animate callback, 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 does not help to find out why this is happening (but I cannot recreate the problem myself), but it provides fault tolerance to make sure that the layout does not break;

Answer 2

I believe this happens when you try to animate before the previous animation has finished. Use jQuery stop () just before the animation. For instance:

 $('#animatingDiv').stop(false, true).animate({height:300}, 200, callback); 

The first parameter (false) will empty the animation queue for this element, and the second parameter (true) will move to the end of the current animation before starting a new animation.

Answer 3

You can do this with much less code and much less headaches.

1. Store tablet position attributes in classes

 .tablet1{ height:100px; width:140px; margin-left:-540px; top: 200px; z-index:10; } 

2. Use a common function to handle all of your transitions.

The jQuery user interface will do all the work for you if you use switchClass

 switchTabletsRight = function(){ var i, next, max = 5; for(i = 1; i <= max; i++){ next = (i < max)? i + 1 : 1; $(".tablet" + i).switchClass("tablet" + i, "tablet" + next); } };​ 

Here's a proof of JSfiddle concept: http://jsfiddle.net/nRHag/4/

Answer 4

You set CSS positions to decimal values.

  img_w = $("#tablet"+num+" img").width(); img_w = img_w *140 / 600; img_h = $("#tablet"+num+" img").height(); img_h = img_h *140 /600; ... var new_width = $(this).width() * 140 / 600; $(this).css('width', new_width); var new_height = $(this).height() * 140 / 600; $(this).css('height', new_height); 

Your separation may cause decimal results that have different effects in different browsers. CSS subpixel positioning can cause unexpected errors.