如何通过jQuery停止鼠标离开太快而缩短背景图像过渡

Posted 2023-05-09

【中文标题】如何通过jQuery停止鼠标离开太快而缩短背景图像过渡

【英文标题】：How to stop background-image transition being cut short by mouse leaving too quickly with jQuery

【发布时间】：2017-10-21 09:13:48

【问题描述】：

我目前有一个图像 div，当我使用 jQuery 的 css() 方法将鼠标悬停在某个触发 div 上时，它的背景图像会发生变化。我对图像 div 应用了 0.6 秒的缓动过渡，以便它从图像平滑地淡入到图像。但是，如果我在触发 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>

【参考方案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 图像为空白（白色像素）。超时是必要的，以允许 (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>