Javascript 如何使用jQuery阻止鼠标过快离开而缩短背景图像过渡

我当前有一个image div，当我使用jQuery的css（）方法悬停在某个触发器div上时，它的背景图像会发生变化。我对图像div应用了0.6s的易用性转换，使其从一个图像平滑地淡入另一个图像。但是，如果我在触发器div之间移动过快，背景图像会立即跳到下一个，并且不会平滑褪色

我对JS和jQuery比较陌生，我正在寻找一种能够处理快速鼠标移动的解决方案，这样当鼠标退出一个触发器div时，下一个背景图像开始平滑淡入，即使最后一次鼠标移动的过渡尚未完成。这是小提琴（请不要介意我使用的奇怪图像）：

代码：

$（'.hover'）.hover（函数（）{
$（'#image'）.css（'background-image'，$（this.attr（'data-attribute'））；
});
*{
保证金：0；
填充：0；
字号：0；
}
.悬停{
高度：100px；
宽度：100px；
字体大小：14px；
显示：内联块；
颜色：白色；
文本对齐：居中；
线高：100px；
}
#一个{
背景色：#f92；
}
#两个{
背景色：rgba（251402301）；
}
#三{
背景色：#2cf；
}
#四{
背景色：#f46；
}
#形象{
高度：400px；
背景图像：url（'http://i.imgur.com/x37ckzO.jpg');
宽度：400px；
背景尺寸：封面；
背景位置：中心；
过渡：0.6s缓解；
}

图1
图2
图3
图4
我不得不承认，我只是部分理解了这个问题以及我的解决方案为什么有效。下面的内容是反复试验的结果，在desktop/Chrome中运行良好（否则未经测试）

首先，必须使用四个所需背景中没有一个的背景来初始化图像。如果没有，则当返回到初始图像-“图像1”时，修复程序将不会始终工作

为了演示，我使用了我在facebook上找到的一个白色像素。你应该为自己服务

#image {
    height: 400px;
    background-image: url('https://www.facebook.com/tr?id=742377892535530&ev=PageView&noscript=1'); /* single white pixel */
    width: 400px;
    background-size: cover;
    background-position: center;
    transition: 0.6s ease;
}

现在，你必须设计一个三重背景变化——两个在mouseleave上，一个在mouseenter上

var $image = $('#image');
$('.hover').on('mouseenter', function() {
    var self = this;
    setTimeout(function() {
        $image.css('background-image', $(self).data('attribute')); // (1)
    }, 0);
}).on('mouseleave', function() {
    var self = this;
    $image.css('background-image', '');  // (2)
    setTimeout(function() {
        $image.css('background-image', $(self).data('attribute')); // (3)
    }, 0);
}).eq(0).trigger('mouseenter');

最好按照从一个
.hover
元素到另一个-（2）（3）（1）元素的顺序来解释这三个转换


（2） 这是关键。它修复了问题中报告的不良影响（我真的不明白为什么！）
（3） 是（2）的结果。如果没有（3）常规的“鼠标移动”（不输入另一个
.hover
元素）将导致bg图像为空白（白色像素）。超时是允许（2）次咬合所必需的
（1） 是你真正想要的效果。超时是（3）超时的结果。（1） 必须晚于前面的（3）

这是我所能理解的

最后，
.eq（0）.trigger（'mouseenter'）
是将背景图像初始化为“image 1”按钮的背景图像所必需的


var$image=$（'#image'）；
$（'.hover'）.on（'mouseenter'，function（）{
var self=这个；
setTimeout（函数（）{
$image.css（'background-image'，$（self.data（'attribute'）；
}, 0);
}).on（'mouseleave'，function（）{
var self=这个；
$image.css（'background-image'，''）；
setTimeout（函数（）{
$image.css（'background-image'，$（self.data（'attribute'）；
}, 0);
}).eq（0）.触发器（'mouseenter'）
*{
保证金：0；
填充：0；
字号：0；
}
.悬停{
高度：100px；
宽度：100px；
字体大小：14px；
显示：内联块；
颜色：白色；
文本对齐：居中；
线高：100px；
}
#一个{
背景色：#f92；
}
#两个{
背景色：rgba（251402301）；
}
#三{
背景色：#2cf；
}
#四{
背景色：#f46；
}
#形象{
高度：400px；
^背景图像：url（'http://i.imgur.com/x37ckzO.jpg');
背景图像：url（'https://www.facebook.com/tr?id=742377892535530&ev=PageView&noscript=1');
宽度：400px；
背景尺寸：封面；
背景位置：中心；
过渡：0.6s缓解；
}

图1
图2
图3
图4