Question

如果您使用CSS3动画在屏幕上为相对位置的元素定位东西

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

当您使用javascript询问商品位置时，它会报告该商品仍然是

top:0
left:0

例如，看一下这个例子中使用jQuery Isotope插件的元素的位置：

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

我是否必须使用这样的jQuery css（）方法？我甚至都不知道这是否有效！

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

更新：

我已在JsFiddle http://jsfiddle.net/uQtur/3/

上发布了此示例

JS

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>

Answer 1

在选项集itemPositionDataEnabled: true中。然后，您将获得.data('isotope-item-position')的值。见http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled

由于Isotope使用CSS3转换进行定位，因此

.offset()和getComputedStyle无效。另一种解决方案是使用transformsEnabled: false禁用转换。

Answer 2

您可以使用jQuery的偏移函数，它将为您提供相对位置。如果您需要准确的位置，则可以获取容器元素的确切位置。因此，您的代码可能如下所示：

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

jQuery在使用css3动画制作动画时获取元素位置

2 个答案: