Zurück zur ursprünglichen Position mit jQuery animieren

Question

Ich möchte das Bild animieren, das vom Benutzer an den oberen linken 100x100 angeklickt wird, dann möchte ich, dass es an die ursprüngliche Position zurückkehrt, wo die Animation gestartet wurde, aber mit diesem Stück Code bleibt Verschieben um einige Pixel nach oben und links. Ich konnte nicht herausfinden, was dieses Problem verursacht. Wie kann ich es zu seiner ursprünglichen Position zurückkehren lassen?

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

Während ich aus bin Animieren, und eine andere Position als sich selbst, der folgende Code sollte Ihnen eine Idee geben, wie zu tun, was Sie zu tun versuchen:

$('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 .

Ich werde feststellen, dass in meinem ersten Versuch, meine eigene Animation auch hatte ein vorübergehendes Flackern, die auf das Containerelement mit einem Padding oder Rand zu sein scheint, weshalb der CSS-Bereich auf dieser Seite folgende enthält das:

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

Dies scheint geheilt zu haben, dass kurzzeitige ‚Flimmern‘, und, vermute ich, würde Ihr eigenes Problem heilen wahrscheinlich. Aber ohne eine Live-Demo zu sehen, ist es unglaublich schwierig zu wissen, was das Problem ist, außer zu raten. Wenn dies nicht hilft, würde ich sicherlich empfehlen, eine JS Fiddle oder JS Bin Demo zu veröffentlichen, damit wir sehen können, mit was Sie arbeiten.

Answer 2

Könnte es sein, dass die img Sie Animation ist absolut positioniert? Ich konnte dieses Problem mit einem absolut positionierten img reproduzieren. Wenn Sie das Bild relativ positionieren, glaube ich, dass dies Ihr Problem beheben wird. Ich habe ein vereinfachtes Beispiel here eingerichtet. Versuchen Sie, das CSS in position:absolute zu ändern, und Sie werden das Problem sehen.

Ich bin nicht sicher, warum jQuery wird nicht den Inline-Stil des Elements in Kombination für die Höhe der toggle Option respektieren, vielleicht können andere über das Läuten in.

Answer 3

dieser Funktion werden alle Arten animiert Starterposition/style

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