CSS3/JS在动画期间获取元素的位置

Question

我需要获得元素的位置(使用jQuery)

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

但是我需要在这期间做css3 translate animation.div位置的动画转换包含在position()数据中.

是否有可能在动画期间获取元素的位置,但是没有任何翻译的位置(就像没有动画一样)？

Answer 1

编辑

"自从css3以来,我没有使用.animate进行简单的动画. - 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/

试试(见consolejsfiddle,链接如下)

  $(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