Анимация в исходное положение с помощью jQuery

Question

Я хочу анимировать изображение, которое щелкнул пользователь в левом верхнем углу 100x100, после чего я хочу, чтобы он вернулся в исходное положение, в котором началась анимация, но с этим фрагментом кода, который он хранит скольжение по некоторым пикселам вверху и слева. Я не мог понять, что вызывает эту проблему. Как я могу заставить его вернуться в исходное положение?

var posLeft; 
var posTop; 

$(this).children("img").click(function() { 


     goToTopLeft($(this)); 

     $.each($(this).parent().children("img"), function() { 

      $(this).css("z-index","0"); 

     }); 

     goToFrontFromTopLeft($(this)); 

     $(this).css("z-index", "1"); 



    }); 

function goToTopLeft(img) { 
     posLeft = img.position().left; 
     posTop = img.position().top; 
     img.animate({ top: '-=100', left: '-=100', height: 'toggle' }, 500); 
    } 

    function goToFrontFromTopLeft(img) { 
     img.animate({ top: posTop, left: posLeft, height: 'toggle' }, 500); 
    } 

Answer 1

В то время как я оживляющий от и до, другое положение, чем вы сами, следующий код должен дать вам представление о том, как сделать то, что вы пытаетесь сделать:

$('img').click(
    function(){ 
     var offset = $(this).offset(); 
     var originLeft = offset.left; 
     var originTop = offset.top; 
     $(this).animate(
      { 
       'top' : '400px', 
       'left': '200px' 
      }, 1500, function() { 
       $(this).animate({ 
        'top': originTop, 
        'left' : originLeft 
      }, 1500) 
        }); 

    }); 

Link to JS Fiddle Demo ,

Замечу, что в моей первой попытки, моя собственная анимация также имел мгновенный мерцание, которое, кажется, из-за элемента контейнера, имеющего отступы, или маржи, и именно поэтому CSS панели на этой странице содержит следующее:

body, div, iframe { 
    padding: 0; 
    margin: 0; 
} 

Это, кажется, вылечили, что мгновенная «фликер», и, я подозреваю, что, скорее всего, вылечить свой собственный вопрос. Но, не видя живого демо, невероятно сложно понять, в чем проблема, помимо угадывания. Если это не поможет, я бы рекомендовал опубликовать демо-версию JS Fiddle или JS Bin, чтобы мы могли видеть, с чем вы работаете.

Answer 2

Не может быть, что img вы анимируете, позиционируется абсолютно? Я смог воспроизвести эту проблему с абсолютно позиционированным img. Если вы позиционируете изображение относительно, я считаю, что это устранит вашу проблему. Я установил упрощенный пример here. Попробуйте изменить CSS на position:absolute, и вы увидите проблему.

Я не уверен, почему JQuery не будет уважать внутренний стиль элемента в сочетании с toggle вариантом для роста, может быть, другие могут звонить в об этом.

Answer 3

Эта функция возвращает все анимированные стили стартер положение/стиль

var animate = function(selector, obj) { 
    var original = {}; 
    if (!$(selector).is(":animated")) { 
     $.each(obj, function(i, v) { 
      original[i] = $(selector).css(i); 
     }); 
     $(selector).animate(obj, function() { 
      $(selector).animate(original); 
     }) 
    } 
}