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动画动画

回答

相关问题