jQuery的得到一個元素的位置時，它已經使用CSS3動畫動畫

如果使用CSS3動畫在屏幕上的位置的東西因爲這是相對jQuery的得到一個元素的位置時，它已經使用CSS3動畫動畫

-moz-transform: translate(125px, 5px);

當你要求使用JavaScript的項目位置位置的元素它會報告該項目仍

top:0 
left:0

例如看看在使用jQuery的同位素的插件這個例子中元素的位置：

http://isotope.metafizzy.co/demos/basic.html

我需要使用像這樣的jQuery css（）方法嗎？我甚至不知道這是否會奏效！

$(element).css('-moz-transform')

UPDATE：

我已經發布了這樣的一個例子上的jsfiddle http://jsfiddle.net/uQtur/3/

var elements = $('.element').each(function(i, e){ 
    var el = $(this); 
    var position = el.position(); 
    var offset = el.offset(); 

    console.log('position', position); 
    console.log('offset', offset); 

    var positionLeft = window.getComputedStyle(el.get(0), null).getPropertyValue('left'); 
    var positionTop = window.getComputedStyle(el.get(0), null).getPropertyValue('top'); 

    console.log('computed position left', positionLeft); 
    console.log('computed position top', positionTop); 

    var transform = el.css('-moz-transform'); 
    console.log(transform); 

    // > matrix(1, 0, 0, 1, 340px, 10px) 
});

HTML

<div id='container'> 
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(10px, 10px);'> 
     H 
    </div> 
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(120px, 10px);'> 
     He 
    </div> 
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(230px, 10px);'> 
     He 
    </div> 
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(340px, 10px);'> 
     He 
    </div> 
</div>

來源

2012-02-01 superlogical

你可以發佈一個演示（也許在[JS小提琴]（http://jsfiddle.net/））供我們玩，以幫助回答你的問題？ – 2012-02-01 13:09:49

我會盡力，儘管我得到的是一個'502：壞門戶'的錯誤（顯然不是你的錯;只是JS小提琴被稱重，估計......）。 – 2012-02-01 13:35:48

我嘗試過使用getComputedStyle ...不起作用 – superlogical 2012-02-01 13:40:33

您可以使用jQuery的offse t函數，它會給你相對的位置。如果您需要確切位置，則可以確定容器元素的確切位置。因此，您的代碼可能如下所示：

var off = $("div.element[data-symbol='Ca']").offset(); 
var containPos = $("#container").position(); 

var totalTop = off.top + containPos.top; 
var totalLeft = off.left + containPos.left; 

console.log(totalTop); 
console.log(totalLeft);

來源

2012-02-01 13:36:02 jwegner

對不起，但你錯了。偏移是頂部：0和左：0檢出證明http://jsfiddle.net/uQtur/3/ – superlogical 2012-02-01 13:47:44

非常有趣 - 我在同位素頁面上獲得了積極的結果。對不起的信息！ – jwegner 2012-02-01 15:03:24

這種方法對我來說很合適，雖然沒有使用'同位素'，但使用偏移量和位置（用於計算谷歌地圖單元格位置）工作。謝謝 – tonycoupland 2013-09-10 19:49:14

在選項集itemPositionDataEnabled: true中。然後你得到值爲.data('isotope-item-position')。請參見http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled

.offset()和getComputedStyle將不起作用，因爲同位素利用CSS3變換進行定位。另一種解決方案是禁用轉換，使用transformsEnabled: false。

來源

2012-02-02 22:28:08 desandro

非常感謝@desandro我不敢相信我錯過了這些文檔，在過去的幾周裏我一直在爲他們着迷！耶現在我將能夠計算位置，以便我可以顯示一些相對於同位素項目的彈出窗口，然後我可以重新開啓css動畫:) – superlogical 2012-02-07 08:52:27

jQuery的得到一個元素的位置時，它已經使用CSS3動畫動畫

回答

相關問題