3

我需要在 CSS 转换中间接收元素 left 和 top 属性。目前我使用 jQuery 位置方法，它似乎在某种程度上起作用。

我做了两个例子来更清楚地展示我的问题：

1）这是非工作示例，其中元素的位置打印到控制台。接收到正确的位置，直到元素转换更改为其原始位置。在变换值第一次更改后，位置不再更新。jsFiddle 链接：http: //jsfiddle.net/PCWDa/8/

2）这是一个工作示例，只有向我们报告元素位置的方式有所不同：位置被输出到输入（类型=文本）元素值。jsFiddle 链接：http: //jsfiddle.net/PCWDa/9/

结论：当 dom 元素属性没有收到任何更新（如更新文本元素的值等）时，jQuerys position() 方法似乎没有收到正确的位置。

漏洞？这可能是 jQuery、css 或浏览器本身的错误？是否有任何解决方法可以让第一个示例正常工作 - 随时在过渡中间获得正确的位置，而无需像第二个示例中那样更改 dom 元素属性。

jsFiddle 代码：

要获取示例 1 代码，请将 variable working 更改为 false 并将示例 2 更改为 true。

css

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-transition: all 5000ms ease;
}
.box_moved{
    -webkit-transform: translateX(300px);
}

html

<div class="box"></div>
<input type="text" class="val">

javascript

var direction = false;
var working = false; 

window.forward = function(){$('.box').addClass('box_moved')}
window.backward = function(){$('.box').removeClass('box_moved')}

window.swap = function(){
if( direction = !direction )
        forward()
    else
        backward();
}

window.getlocation = function(){
    if(working)
        $('.val').val( $('.box').position().left );
    else
        console.log($('.box').position().left);
    }

window.setInterval("swap()",3000);
window.setInterval("getlocation()",200);
4

0 回答 0