javascript - 如何使用 jQuery 阻止鼠标离开太快而缩短背景图像转换

Question

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

我对 JS 和 jQuery 比较陌生，正在寻找一种能够处理快速鼠标移动的解决方案，以便当鼠标退出一个触发 div 时，下一个背景图像开始平滑淡入，即使过渡从上次鼠标移动还没有结束。这是 fiddle (请不要介意我使用的奇怪图像):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)，常规的“mouseleave”(不输入另一个 .hover 元素)将导致 bg-image 为空白(白色像素)。超时对于允许 (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>