jquery - 如何从长按 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 规则。然后，我尝试在 CSS 中使用 steps 来计时，但无法使其正常工作，因为只有在长按成功未加载时才会添加类。

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>