CSS3 / JS gets element position during animation

Question

I need to get the position of the like element (with jQuery)

$(".mydiv").position().left;

However, I need to do this on time css3 translate animation. This animated translation of the div position is included in the data position().

Is it possible to get the position of the element during the animation, but the position without any translations (just like the animation will not)?

Answer 1

Edit

"I do not use .animate for simple animations with css3. - Kluska000"

- jquery animate() start, step, progress , css. , .animate() - - start, step, progress; duration css . , , jquery .animate() , DOM; 2 js objects.

. window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

(. console jsfiddle, )

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      complete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle.net/guest271314/xwL7v/

. http://api.jquery.com/animate/ start, step, progress

Answer 2

, , , , - , dom , .

, , :

Live Demo: Fiddle

ps: , / -webkit- :

-webkit-: chrome, safari
-moz-: firefox
-ms- : internet explorer
-o-: opera
without prefix: default

HTML:

<div id="status_div">&nbsp;</div>
<div id="slider"></div>

CSS

* {
    margin:0;
    padding:0;
}
#slider {
    width:100px;
    height:100px;
    display:block;
    background:red;
}
.SliderAnim {
    -webkit-animation:some_animation 2000ms linear forwards;
}
#status_div {
    position:relative;
    left:0;
    top:0;
    width:100%;
    height:auto;
    border:2px solid navy;
    color:black;
}
@-webkit-keyframes some_animation {
    from {
        -webkit-transform:translateX(-100px);
    }
    to {
        -webkit-transform:translateX(100px);
    }
}

JS:

$(function () {
    // those are the position and offset before animation was attached
    var pX = $("#slider").position().left;
    var pY = $("#slider").position().top;
    var oX = $("#slider").offset().left;
    var oY = $("#slider").offset().top;
    // those are declarations for vars which will store the position and offset
    // of the element right after attaching the animation, and will result in the values
    // of the first fram of the animation
    var npX = 0;
    var npY = 0;
    var noX = 0;
    var noY = 0;
    // this is a timer function to write the details on the status bar
    setInterval(function () {
        // those are the position and offset of the element during the animation
        var apX = $("#slider").position().left;
        var apY = $("#slider").position().top;
        var aoX = $("#slider").offset().left;
        var aoY = $("#slider").offset().top;
        //print status bar info
        $("#status_div").html("BEFORE ATTACHING ANIMATION position: " + pX + "," + pY + "  offset: " + oX + "," + oY + " <br/> AFTER ATTACHING ANIMATION position: " + npX + "," + npY + "  offset: " + noX + "," + noY + "<br/> DURING ANIMATION position: " + apX + "," + apY + "  offset: " + aoX + "," + aoY);
    }, 100);
    //attach the animation class to the slider div 
    $("#slider").addClass("SliderAnim");
    //record the changed (will result in the first animation frame)
    npX = $("#slider").position().left;
    npY = $("#slider").position().top;
    noX = $("#slider").offset().left;
    noY = $("#slider").offset().top;
});