Update-Element Offset während CSS-Animation jQuery

Question

Ich versuche, aktuelle Offset eines Elements während CSS-Animation zu erhalten. Ich bin Brennen Animation Trog jquery wie folgt aus:

$('.left').css('margin-left', '50%'); 

Natürlich Element bekam alle Übergänge in CSS so .css- in Animation verwandelt. Dann versuche ich Strom wie das Offset zu erhalten:

var left = $(".left"); 
var Loffset = left.offset(); 
console.log(Loffset.left); 

Das Problem ist, dass während der Animation nicht autamatically aktualisiert versetzt ist. Und ich möchte Element in bestimmter Position fangen.

Thnx im Voraus!

Answer 1

Sie können den aktuellen Offset des Elements unter Verwendung der step-Eigenschaft in jquery animate() abrufen.

$("div").animate({ 
 
    "margin-left": "50%" 
 
},{ 
 
    duration: 3000, 
 
    step: function(){ 
 
     console.log($(this).offset().left); 
 
    } 
 
});

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Answer 2

fand ich einen Weg, dies zu tun. Zunächst einmal, ich habe eine Funktion aus, die kontinuierlich feuert:

var myFunction = function() { 
     var left = $('.left'); 
     var Loffset = left.offset(); 
     console.log(Loffset.left); 
     if (windowWidthQuarter == Loffset.left) { 
      /* here goes code */   
     } 
}; 
var timer = setInterval(myFunction, 0); 

Es versetzt jedes 0 miliseconds (non-stop) zu überprüfen. Dann, wenn der Übergang über ich es herunterzufahren:

$(".left").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    clearTimeout(timer); 
});