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

Question

>我目前有一个图像div，当我使用jQuery的css()方法将鼠标悬停在某个触发器div上时，其背景图像会发生变化。 我对图像div应用了0.6s的轻松过渡，以便它从图像平滑地淡入图像。 但是，如果我在触发器div 之间移动太快，背景图像会立即跳转到下一个，并且没有平滑的淡入淡出。

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

法典：

$('.hover').hover(function() {
	$('#image').css('background-image', $(this).attr('data-attribute'));
});

*{
	margin: 0;
	padding: 0;
	font-size: 0;
}
.hover {
	height: 100px;
width: 100px;
	font-size: 14px;
	display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}
#one {
background-color: #f92;
}
#two {
background-color: rgba(25, 140, 230, 1);
}
#three {
background-color: #2cf;
}
#four {
background-color: #f46;
}
#image {
	height: 400px;
	background-image: url('http://i.imgur.com/x37ckzO.jpg');
	width: 400px;
	background-size: cover;
	background-position: center;
	transition: 0.6s ease;
}

<div id="image"></div>
<div class="hover" id="one" data-attribute='url("http://i.imgur.com/x37ckzO.jpg")'>Image 1</div>
<div class="hover" id="two" data-attribute='url("http://i.imgur.com/t6WWdc2.png")'>Image 2</div>
<div class="hover" id="three" data-attribute='url("http://i.imgur.com/jA36LVy.png")'>Image 3</div>
<div class="hover" id="four" data-attribute='url("http://i.imgur.com/5a5xBLH.png")'>Image 4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

必须承认，我只是部分了解了这个问题以及为什么我的解决方案有效。以下是反复试验的结果，在桌面/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')将背景图像初始化为"图像 1"按钮。

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

*{
	margin: 0;
	padding: 0;
	font-size: 0;
}
.hover {
	height: 100px;
width: 100px;
	font-size: 14px;
	display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}
#one {
background-color: #f92;
}
#two {
background-color: rgba(25, 140, 230, 1);
}
#three {
background-color: #2cf;
}
#four {
background-color: #f46;
}
#image {
height: 400px;
^background-image: url('http://i.imgur.com/x37ckzO.jpg');
background-image: url('https://www.facebook.com/tr?id=742377892535530&ev=PageView&noscript=1');
width: 400px;
background-size: cover;
background-position: center;
transition: 0.6s ease;
}

<div id="image"></div>
<div class="hover" id="one" data-attribute='url("http://i.imgur.com/x37ckzO.jpg")'>Image 1</div>
<div class="hover" id="two" data-attribute='url("http://i.imgur.com/t6WWdc2.png")'>Image 2</div>
<div class="hover" id="three" data-attribute='url("http://i.imgur.com/jA36LVy.png")'>Image 3</div>
<div class="hover" id="four" data-attribute='url("http://i.imgur.com/5a5xBLH.png")'>Image 4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>