Javascript 鼠标移动延迟

我想将缩放图像的消失延迟X秒，这样我就可以淡出图像，而不是简单地消失

我可以简单地将.delay（1000）添加到mouseleave/hide代码行的某个地方吗

我试过了，但不幸的是似乎不起作用。我还尝试包装一个setTimeout（…，1000）围绕代码的各个部分，但也无法实现

非常感谢任何帮助

这是JSFIDLE

这是原始的“EasyZoom”.js代码

        /*!
 * @name        EasyZoom
 * @author      Matt Hinchliffe <>
 * @modified    Tuesday, September 6th, 2016
 * @version     2.4.0
 */

! function (a) {
    "use strict";
function b(b, c) {
    this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
    loadingNotice: "Loading image",
    errorNotice: "The image could not be loaded",
    errorDuration: 2500,
    linkAttribute: "href",
    preventClicks: !0,
    beforeShow: a.noop,
    beforeHide: a.noop,
    onShow: a.noop,
    onHide: a.noop,
    onMove: a.noop
};
b.prototype._init = function () {
    this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
        "mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
        "mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
        "mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
    }), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
        a.preventDefault()
    })
}, b.prototype.show = function (a, b) {
    var g, h, i, j, k = this;
    if (this.opts.beforeShow.call(this) !== !1) {
        if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
            (k.isMouseOver || !b) && k.show(a)
        });
        this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
    }
}, b.prototype._onEnter = function (a) {
    var b = a.originalEvent.touches;
    this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
    this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
    this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function (a) {
    a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
    var a = this;
    this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
        a.$notice.detach(), a.detachNotice = null
    }, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
    var d = new Image;
    this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
    if (0 === a.type.indexOf("touch")) {
        var b = a.touches || a.originalEvent.touches;
        g = b[0].pageX, h = b[0].pageY
    } else g = a.pageX || g, h = a.pageY || h;
    var i = this.$target.offset(),
        j = h - i.top,
        k = g - i.left,
        l = Math.ceil(j * f),
        m = Math.ceil(k * e);
    if (0 > m || 0 > l || m > c || l > d) this.hide();
    else {
        var n = -1 * l,
            o = -1 * m;
        this.$zoom.css({
            top: n,
            left: o
        }), this.opts.onMove.call(this, n, o)
    }
}, b.prototype.hide = function () {
    this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
    this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
        src: b,
        srcset: a.isArray(d) ? d.join() : d
    }), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
    this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
    return this.each(function () {
        var d = a.data(this, "easyZoom");
        d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
    })
}, "function" == typeof define && define.amd ? define(function () {
    return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);



    // Instantiate EasyZoom instances
    var $easyzoom = $('.easyzoom').easyZoom();

    // Setup thumbnails example
    var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');

    $('.thumbnails').on('click', 'a', function(e) {
        var $this = $(this);

        e.preventDefault();

        // Use EasyZoom's `swap` method
        api1.swap($this.data('standard'), $this.attr('href'));
    });

    // Setup toggles example
    var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');

    $('.toggle').on('click', function() {
        var $this = $(this);

        if ($this.data("active") === true) {
            $this.text("Switch on").data("active", false);
            api2.teardown();
        } else {
            $this.text("Switch off").data("active", true);
            api2._init();
        }
    });

/*！
*@name EasyZoom
*@作者Matt Hinchliffe
*@修改日期：2016年9月6日，星期二
*@version 2.4.0
*/
! 职能（a）{
“严格使用”；
功能b（b，c）{
this.$target=a（b），this.opts=a.extend（{}，i，c，this.$target.data（）），void 0===this.isOpen&&this.\u init（）
}
变量c、d、e、f、g、h、i={
加载通知：“加载图像”，
errorNotice:“无法加载图像”，
持续时间：2500，
linkAttribute:“href”，
单击次数：！0，
演出前：a.noop，
之前隐藏：a.noop，
onShow:a.noop，
onHide:a.noop，
onMove:a.noop
};
b、 原型。_init=函数（）{
this.$link=this.$target.find（“a”），this.$image=this.$target.find（“img”），this.$flyout=a（“”），this.$notice=a（“”），this.$target.on({
“mousemove.easyzoom touchmove.easyzoom”：a.proxy（this.\u onMove，this），
“mouseleave.easyzoom touchend.easyzoom”：a.proxy（这个._onLeave，这个），
“mouseenter.easyzoom touchstart.easyzoom”：a.proxy（this.\u onEnter，this）
})，this.opts.preventClicks&&this.target.on（“click.easyzoom”，函数（a）{
a、 预防默认值（）
})
}，b.prototype.show=函数（a，b）{
var g，h，i，j，k=这个；
如果（this.opts.beforeShow.call）（this）！==！1）{
如果（！this.isReady）返回此.\u loadImage（this.$link.attr（this.opts.linkAttribute）），函数（）{
（k.isMouseOver | | | b）和k.show（a）
});
this.$target.append（this.$flyout），g=this.$target.width（），h=this.$target.height（），i=this.$flyout.height（），c=this.$zoom.width（）-i，d=this.$zoom.height（）-j，0>c&（c=0），0>d&（d=0），e=c/g，f=d/h，this.isOpen=！0，this.opts.onShow.call（this），a&&this.move（a）
}
}，b.原型。_onEnter=函数（a）{
var b=a.originalEvent.Touchs；
this.isMouseOver=！0，b&&1！=b.length | |（a.preventDefault（），this.show（a，！0））
}，b.原型。_onMove=函数（a）{
this.isOpen&（a.preventDefault（），this.\u move（a））
}，b.原型。_onLeave=函数（）{
this.isMouseOver=！1，this.isOpen&&this.hide（）
}，b.原型。_onLoad=函数（a）{
a、 currentTarget.width&&（this.isReady=！0，this.$notice.detach（），this.$flyout.html（this.$zoom），this.$target.removeClass（“正在加载”）.addClass（“准备就绪”）、a.data.call&&a.data（）
}，b.prototype.\u onError=函数（）{
var a=此；
this.$notice.text（this.opts.errorNotice）、this.$target.removeClass（“正在加载”）.addClass（“is error”）、this.detachNotice=setTimeout（函数（）{
a、 $notice.detach（），a.detachNotice=null
}，this.opts.errorDuration）
}，b.prototype._loadImage=函数（b，c）{
var d=新图像；
this.$target.addClass（“正在加载”）.append（this.$notice.text（this.opts.loadingNotice）），this.$zoom=a（d）.on（“error”，a.proxy（this.\onError，this））.on（“load”，c，a.proxy（this.\u onLoad，this）），d.style.position=“absolute”，d.src=b
}，b.原型。_move=函数（a）{
如果（0==a.type.indexOf（“触摸”））{
变量b=a.touchs | | a.originalEvent.touchs；
g=b[0]。pageX，h=b[0]。pageY
}否则g=a.pageX | | g，h=a.pageY | h；
var i=此.$target.offset（），
j=h-i.top，
k=g-i.左，
l=数学单元（j*f），
m=数学单元（k*e）；
如果（0>m | | 0>l | | m>c | | l>d）这个.hide（）；
否则{
变量n=-1*l，
o=-1*m；
这是$zoom.css({
top:n，
左：o
})，this.opts.onMove.call（this，n，o）
}
}，b.prototype.hide=函数（）{
this.isOpen&&this.opts.beforeHide.call（this）！=！1&&this.flyout.detach（），this.isOpen=！1，this.opts.onHide.call（this））
}，b.prototype.swap=函数（b，c，d）{
this.hide（）、this.isReady=！1、this.detachNotice&&clearTimeout（this.detachNotice）、this.$notice.parent（）.length&&this.$notice.detach（）、this.$target.removeClass（“加载就绪即出错”）、this.$image.attr({
src:b，
srcset:a.isArray（d）？d.join（）：d
})，this.$link.attr（this.opts.linkAttribute，c）
}，b.prototype.teardown=函数（）{
this.hide（）、this.$target.off（“.easyzoom”）.removeClass（“正在加载即准备就绪即出错”）、this.detachNotice&&clearTimeout（this.detachNotice），删除此。$link，删除此。$zoom，删除此。$image，删除此。$notice，删除此。$flyout，删除此.isOpen，删除此.isReady
}，a.fn.easyZoom=函数（c）{
返回此。每个（函数（）{
var d=a.数据（此为“easyZoom”）；
d？void 0==d.isOpen和d.u init（）：a.data（这个“easyZoom”，新的b（这个，c））
})
}，“function”==typeof define&&define.amd？define（function（）{
返回b
})：“未定义”！=模块类型和模块导出类型和模块导出类型（模块导出=b）
}（jQuery）；
//实例化EasyZoom实例
变量$easyzoom=$（'.easyzoom'）.easyzoom（）；
//设置缩略图示例
var api1=$easyzoom.filter（'.easyzoom--with thumbnails'）.data（'easyzoom'）；
$（'.thumbnails'）。在（'click'，'a'，函数（e）上{
var$this=$（this）；
e、 预防默认值（）；
//使用EasyZoom的“交换”方法
api1.swap（$this.data（'standard'），$this.attr（'href'）；
});
//设置切换示例
var api2=$easyzoom.filter（'.easyzoom--with toggle'）.data（'easyzoom'）；
$（'.toggle'）。打开（'click'，function（）{
var$this=$（this）；
if（$this.data（“active”）==true）{
var $easyzoom = $('.easyzoom').easyZoom({
    beforeHide: function() {
        this.$flyout.fadeOut();
        return false;
    },
    beforeShow: function() {
        this.$flyout.show();
    }
});