如何从Longpress jQuery函数创建自定义动画

Question

更新（从答案中添加）

(function($) {
    $.fn.longpress = function(longCallback, duration) {

    // set some defaults
    let defaults = {
        click:      function(el, e) {},
        start:      function(el, e) { el.css("color", "#000"); },
        complete:   function(el, e) { el.css("color", "#FFF"); },
        cancel:     function(el, e) { el.css("color", "#F00"); },
        duration:   1000
    };

    // extend the options
    let options = $.extend({}, defaults);

    return this.each(function() {
        var $this = $(this);

        // to keep track of how long something was pressed
        var mouse_down_time;
        var timeout;
        $this.data("clicked", "false");

        // mousedown or touchstart callback
        function mousedown_callback(e) {

            // start callback
            options.start($this, e);

            $this.data("clicked", "true");
            mouse_down_time = new Date().getTime();
            var context = $(this);

            // set a timeout to call the longpress callback when time elapses
            timeout = setTimeout(function() {
                if (typeof longCallback === "function") {
                    longCallback.call(context, e);
                    options.complete($this, e);
                    $this.data("clicked", "false");
                } else {
                    $.error('Callback required for long press. You provided: ' + typeof longCallback);
                }
            }, options.duration);

        }

        // mouseup or touchend callback
        function mouseup_callback(e) {
            var press_time = new Date().getTime() - mouse_down_time;

            if (press_time < options.duration) {
                // cancel the timeout
                clearTimeout(timeout);
                $this.data("clicked", "false");

                // call the click if provided
                options.click($this, e);
            }
        }

        // cancel long press event if the finger or mouse was moved
        function move_callback(e) {
            let isClicked = $this.data("clicked");
            if (isClicked == "false")
                return;

            // call the cancel callback
            options.cancel($this, e);
            clearTimeout(timeout);
            $this.data("clicked", "false");
        }


      // Browser Support
      $this.on('mousedown', mousedown_callback);
      $this.on('mouseup', mouseup_callback);
      $this.on('mousemove', move_callback);

      // Mobile Support
      $this.on('touchstart', mousedown_callback);
      $this.on('touchend', mouseup_callback);
      $this.on('touchmove', move_callback);
    });
  };
}(jQuery));

---

我有一个不久前找到的jQuery插件（想记住源代码），它使我可以在网站上具有长按功能：

(function(b) {
    b.fn.longpress = function(e, c, d) {
        "undefined" === typeof d && (d = 1000);
        return this.each(function() {
            function g(a) {
                h = (new Date).getTime();
                var c = b(this);
                f = setTimeout(function() {
                    "function" === typeof e ? e.call(c, a) : b.error("Callback required for long press. You provided: " + typeof e)
                }, d)
            }

            function k(a) {
                (new Date).getTime() - h < d && (clearTimeout(f), "function" === typeof c ? c.call(b(this), a) : "undefined" !== typeof c && b.error("Optional callback for short press should be a function."))
            }

            function l(a) {
                clearTimeout(f)
            }
            var a = b(this),
                h, f;
            a.on("mousedown", g);
            a.on("mouseup", k);
            a.on("mousemove", l);
            a.on("touchstart", g);
            a.on("touchend", k);
            a.on("touchmove", l)
        })
    }
})(jQuery);

效果很好，但是我想知道是否有一种方法可以说背景是根据长按的持续时间而定的#fff，#000还是制作任何其他自定义动画。

我当时在玩弄，但无法弄清楚。我试图在按住长按的每一秒钟添加一个类，然后为每个添加一个CSS规则。然后，我也尝试steps在CSS中使用它来增加时间，但由于只有在长按成功加载后才添加类，因此无法使其正常工作。

Answer 1

原始插件可以在这里找到： https: //github.com/vaidik/jquery-longpress。

我已修改为接受选项对象（在评论中解释）。这是一个例子：

(function($) {
  $.fn.longpress = function(opts) {
    let defaults = {
      click: function(el, e) {},
      start: function(el, e) {},
      complete: function(el, e) {},
      duration: 500
    };

    let options = $.extend({}, defaults, opts);

    return this.each(function() {
      var $this = $(this);

      // to keep track of how long something was pressed
      var mouse_down_time;
      var timeout;
      $this.data("clicked", "false");

      // mousedown or touchstart callback
      function mousedown_callback(e) {

        // start callback
        options.start($this, e);

        $this.data("clicked", "true");
        mouse_down_time = new Date().getTime();
        var context = $(this);

        // set a timeout to call the longpress callback when time elapses
        timeout = setTimeout(function() {
          options.complete($this, e);
          $this.data("clicked", "false");
        }, options.duration);
      }

      // mouseup or touchend callback
      function mouseup_callback(e) {
        var press_time = new Date().getTime() - mouse_down_time;
        if (press_time < options.duration) {
          // cancel the timeout
          clearTimeout(timeout);
          $this.data("clicked", "false");

          // call the click if provided
          options.click($this, e);
        }
      }

      // cancel long press event if the finger or mouse was moved
      function move_callback(e) {
        let isClicked = $this.data("clicked");
        if (isClicked == "false")
          return;

        // call the cancel callback
        options.cancel($this, e);
        clearTimeout(timeout);
        $this.data("clicked", "false");
      }


      // Browser Support
      $this.on('mousedown', mousedown_callback);
      $this.on('mouseup', mouseup_callback);
      $this.on('mousemove', move_callback);

      // Mobile Support
      $this.on('touchstart', mousedown_callback);
      $this.on('touchend', mouseup_callback);
      $this.on('touchmove', move_callback);
    });
  };
}(jQuery));

let options = {
  // Callback after a "normal" click has completed
  click: function(el, event) {
    el.removeClass("rotate");
  },
  // callback after longpress completed
  complete: function(el, event) {
    el.removeClass("rotate");
  },
  // callback before click starts (for both normal and longpress clicks)
  start: function(el, event) {
    el.addClass("rotate");
  },
  // Callback when click is cancelled (user moves mouse)
  cancel: function(el, event) {
    el.removeClass("rotate");
  },
  // Longpress duration
  duration: 5000
};
$('#button').longpress(options);

div {
  border: 1px solid;
  width: 200px;
  height: 200px;
  left: 50px;
  top: 50px;
  position: relative;
}

.rotate {
  animation: 1s rotate infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='button'>

</div>