Jquery 动画左上动态

Question

我正在使用 jquery 动画和 html5 拖放，我想制作与 google 驱动器相同的动画。

我设法做到了：

element.bind('drag', function(e) {
      _.each(draggedFiles, function(id) { //draggedFiles is an array of id
        id = 'fs-row-' + id;
        var newRow = angular.element('body').find('div#'+ id); // Element being animated

        newRow.animate({
          width: 190,
          height: 50,
          top: e.originalEvent.pageY,
          left: e.originalEvent.pageX,
        }, 'medium', function() {
           // When the animation is over the tag element are being removed from the DOM
          _.each(draggedFiles, function(id) {
            id = 'fs-row-' + id;
            angular.element('body').find('div#'+ id).remove();
          });
        });
      });
    });

动画效果很好，转到鼠标位置。但是如果我在动画期间移动鼠标，动画将不会即时更新顶部和左侧，而是继续移动到我单击的位置而不是跟随鼠标。

拖动事件让我知道鼠标在 window 中的位置。是否可以再次触发动画直到它到达鼠标位置？

[edit] 我正在查看 jQuery 文档，发现我可以使用 progress 或 step，但我找不到是否可以更新这两个事件的顶部和左侧。有人知道吗？

Answer 1

我使用 step 函数查找 jQuery 文档找到了我的答案，也许它会对将来的人有所帮助。主要是您可以在每个步骤上编辑每个属性动画的结束或开始。我只需要用鼠标的位置更新结尾。

    var y = 0;
    var x = 0;
    element.bind('drag', function(e) {
      _.each(draggedFiles, function(id) {
        id = 'fs-row-' + id;
        var newRow = angular.element('body').find('div#'+ id);

        newRow.animate({
          opacity: 1,
          width: 190,
          height: 50,
          top: e.originalEvent.pageY,
          left: e.originalEvent.pageX
        }, {
          duration: 400,
          step: function( now, tween ) {
            if (tween.prop === 'top') {
              tween.end = y;
            }
            if (tween.prop === 'left') {
              tween.end = x;
            }
          },
          complete: function() {
            newRow.remove();
            angular.element(dragElement).animate({
              width: 190,
              height: 50,
              opacity: 1
            }, 'fast');
          }
        });
      });

      y = e.originalEvent.pageY + 1;
      x = e.originalEvent.pageX;
    });

Jquery 动画左上动态

Jquery animate top left dynamic

jquery

jquery-animate