Изменение смещения элемента во время анимации css jQuery

Question

Я пытаюсь получить текущее смещение элемента во время анимации css. Я стрельба анимации корыто JQuery, как это:

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

Конечно элемент есть все переходы в CSS так .css превращается в анимацию. Тогда я пытаюсь получить ток смещения так:

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

Проблема заключается в том, что смещение не autamatically обновляется во время анимации. И я хочу поймать элемент в определенном положении.

Thnx заранее!

Answer 1

Вы можете получить текущее смещение элемента, используя step объект в jquery animate().

$("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

Я нашел способ, чтобы сделать это. Прежде всего, я сделал функцию, которая стреляет непрерывно:

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

Это проверка смещения каждый 0 миллисекунды (нон-стоп). Тогда, когда переход закончится я закрыл его вниз:

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