jQuery动画左上角动态答案

【问题标题】：Jquery animate top left dynamicjQuery动画左上角动态
【发布时间】：2015-09-30 11:14:56
【问题描述】：

我正在使用带有 html5 拖放功能的 jquery 动画，我想制作与 google drive 相同的动画。

我设法做到了：

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();
          });
        });
      });
    });

动画工作正常并转到鼠标位置。但是，如果我在动画期间移动鼠标，则动画不会即时更新顶部和左侧，而是继续移动到我单击的位置，而不是跟随鼠标。

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

[编辑] 我正在查看 jQuery 文档，发现我可以使用进度或步骤，但我无法找到是否可以更新这两个事件的顶部和左侧。有人知道吗？

【问题讨论】：

标签： jquery jquery-animate

【解决方案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;
    });

【讨论】：