Question

我在html5拖放时使用了jquery动画，我想制作与谷歌驱动器相同的动画。

我设法做到了：

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

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

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

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

Answer 1

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

    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动画左上角动态

1 个答案: