CODEWITHSUNDEEP
jquerycssjquery-animate
Freeman
Freeman

Reputation: 1190

Animation starts shifting after some time

I'm designing a page with divs that are animated with jQuery animate. This includes moving the divs and scaling them (by setting the width and height among the .animate() parameters). I don't see any flaws in the animation using my MacBook, using both chrome and firefox, but my I have been told that the divs starts shifting out of position if the page is left alone for 8-10 minutes.

  1. How might this be possible? Could it be that on a slower computer, the animations are not synchronised? I am animating 5 divs at the same time and I set an internval (every 8 seconds) for the animation to recurre and I also set the animation speed to slow.

  2. I am animating the divs with something like left += 200px instead of for exampleleft = 450px because in firefox all the divs will jump to the left side of the screen, and some of them jumps so far left that they come out of the screen.

    I think it's because I'm using a parent container div to contain the moving divs and use margin-left: auto; margin-right:auto to center this container div and when setting the left attribute of the animated divs, firefox treats them as having left:0 at the beginning of the animation. I set the position of the container div as relative but the animated divs as absolute (as I don't want them to interfere with one another's position). Is there a better way of doing this?

Upvotes: 0

Views: 465

Answers (1)

RSG
RSG

Reputation: 7123

You can do this with far less code and far fewer headaches.

1. Store your tablet position attributes in classes

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

2. Use a general function to handle all your transitions.

JQuery UI 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);
  }
};​

3. Call the general function with setInterval.

var loop = setInterval(function(){
  switchTabletsRight();
},2000);

Here's the JSfiddle proof of concept: http://jsfiddle.net/nRHag/6/

Upvotes: 1

Related Questions