I need to get the left and top property elements in the middle of the CSS transition. I am currently using the jQuery position method and it seems to be working at some point.
I made two examples to show my problem more clearly:
1) Here is an NON example where the position of an element is printed to the console. The correct position is accepted until the element returns to its original position. After the conversion value is first changed, the position is no longer updated. jsFiddle link: http://jsfiddle.net/PCWDa/8/
2) Here is an example of WORKING with a difference in how the position of the element is indicated to us: the position is output (type = text). jsFiddle link: http://jsfiddle.net/PCWDa/9/
Conclusion : the jQuerys position () method does not get the correct position when the properties of Dom elements do not receive any updates (for example, updating the value of a text element, etc.).
Error? Could it be a bug in jQuery, css or in the browser? Are there any workarounds for the first example of work - to get the correct position in the middle of the transition at any time without making changes to the properties of the dom element, as in the second example.
jsFiddle code:
To get example 1 of the code, change the variable working to false, and to get example 2, to 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);