Анимация начинает двигаться из позиции через некоторое время

Question

Я пытаюсь создать своего рода анимацию слайд-шоу. У меня есть коды здесь: jsFiddle .

Эти таблетки будут вращаться вокруг.

Проблема в том, что в случайное время анимация будет перемещаться за пределы строки. Неправильные планшеты подвергаются неправильной анимации. Вот скриншоты:

А вот так это выглядит, когда анимация идет не так

Основная проблема в том, что я не понимаю, почему анимация будет работать неправильно в случайные моменты времени. На моем компьютере он будет работать в течение нескольких часов, но в других случаях (особенно в Safari).

Answer 1

Вы можете сохранить ожидаемые конечные значения CSS для каждого анимированного эль, а затем в функции обратного вызова animate установить эти значения, поэтому для каждого анимированного эля что-то вроде

var el = $(selector);

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

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

Это не помогает выяснить, почему это происходит (но я не могу воссоздать проблему самостоятельно), но обеспечивает отказоустойчивость, чтобы убедиться, что макет не сломался;

Answer 2

Вы можете сделать это с гораздо меньшим количеством кода и гораздо меньшими головными болями.

1.Сохраните атрибуты положения планшета в классах

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

2.Используйте общую функцию для обработки всех ваших переходов.

JQuery UI сделает всю работу за вас, если вы используете 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);
  }
};​

Вот подтверждение концепции JSfiddle:http://jsfiddle.net/nRHag/4/

Answer 3

Я считаю, что это происходит, когда вы пытаетесь анимировать до того, как предыдущая анимация закончилась.Используйте jQuery stop () непосредственно перед анимацией.Например:

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

Первый параметр (false) очистит очередь анимации для этого элемента, а второй параметр (true) перейдет в конец текущей анимации перед началом новой анимации.

Answer 4

Вы устанавливаете позиции CSS в десятичные значения.

    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);

Ваше деление может быть причиной десятичных результатов, которые имеют разные эффекты в разных браузерах. Субпиксельное позиционирование CSS может привести к вашим непреднамеренным ошибкам.