Tuesday, 12 November 2019

How to create custom animation from longpress jQuery function

I have a jQuery plugin that I found a while ago (cant remember the source) which allowed me to have long press features on a website:

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

It works great, but I was wondering if there was a way to have say the background go from #fff to #000 or make any other custom animation based on the duration of the long press.

I was toying around, but couldn't figure it out. I was trying to add a class for every second the long press was held, then have a CSS rule for each. I then tried using steps in CSS to make it time too, but couldn't get that to work as the classes would only add when the long press was successful not loading.



from How to create custom animation from longpress jQuery function

No comments:

Post a Comment