在css動畫期間更新元素偏移量jQuery

我想在css動畫期間獲取元素的當前偏移量。我射擊動畫槽的jQuery這樣的：在css動畫期間更新元素偏移量jQuery

當然

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

元素得到了在CSS的所有轉變如此的.css變成動畫。然後我試圖獲得當前這樣的偏移：

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

的問題是，抵消了動畫過程中不autamatically更新。我想抓住某個位置的元素。

Thnx提前！

來源

2016-05-29 user3267302

你想在動畫時獲得'offset'元素嗎？ – Mohammad

是的，我想保持它在每個像素更新 - 因爲我需要將它與其他值進行比較，當它滿足價值然後觸發東西 – user3267302

你可以使用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>

來源

2016-05-29 17:27:46 Mohammad

是的，我知道，但css動畫更適合我，並獲得更好的性能。試圖找到像「正在進行的css動畫」事件 – user3267302

我找到了一種方法，做到這一點。所有的首先，我做了的時候觸發汽車無功能：

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

來源

2016-05-29 18:25:08 user3267302

在css動畫期間更新元素偏移量jQuery

回答

相關問題