使用纯JS的图像淡入/淡出会导致图像粘附

Question

我有三个图像，我想在mouseover/mouseout事件中淡入淡出(无法弄清楚我是否应该使用mouseover/mouseenter但这似乎是三级的) 在做了一些研究之后，我找到了一个解决方案，只需一些小的调整就可以很好地工作，但我遇到了最后一个问题，如果我从一个图像快速移动到下一个图像，第一个图像会粘住而不是淡出。

我尝试了很多东西，包括给每个图像单独的计时器，修改图像的淡入淡出方式等等。

我在这里用JS小提琴重新创建了它：https://jsfiddle.net/dm9cgysL/

这是JS小提琴代码：

.HTML：

<img id="project1-img" src="https://i.imgur.com/ZEDaxij.jpg" style="height: 100px; width: 100px; opacity: 0;">
<img id="project2-img" src="https://i.imgur.com/ZEDaxij.jpg" style="height: 100px; width: 100px; opacity: 0;">
<img id="project3-img" src="https://i.imgur.com/ZEDaxij.jpg" style="height: 100px; width: 100px; opacity: 0;">

Javascript：

var timer;
function handleHover(imageId, out) {
let image = document.getElementById(imageId);
if (image) {
handleFade(image, out);
}
}
function handleFade(element, out) {
clearInterval(timer);
//let op = parseInt(element.style.opacity); // initial opacity
let op = out ? 1 : 0;
timer = setInterval(function() {
if (out) {
if (op <= 0) {
element.style.opacity = 0.1;
clearInterval(timer);
}
element.style.opacity = op;
op -= 0.1;
} else {
if (op >= 1) {
element.style.opacity = 0.9;
clearInterval(timer);
}
element.style.opacity = op;
op += 0.1;
}
}, 10);
}
let e = document.getElementById('project3-img');
e.onmouseenter = () => handleHover("project3-img", false)
e.onmouseleave = () => handleHover("project3-img", true)
let f = document.getElementById('project2-img');
f.onmouseenter = () => handleHover("project2-img", false)
f.onmouseleave = () => handleHover("project2-img", true)
let g = document.getElementById('project1-img');
g.onmouseenter = () => handleHover("project1-img", false)
g.onmouseleave = () => handleHover("project1-img", true)

我希望图像在悬停时淡入并在鼠标离开元素时淡出。如果您只关注单个元素但从一个元素转到另一个元素会导致第一个元素粘附，它会起作用，我正在尝试让淡入淡出在第一个元素上完成，淡入淡出在第二个元素上开始，而没有任何动画粘住。

提前感谢，我意识到代码有点混乱，感谢您对我的支持。

Answer 1

这段代码让我们创建一个淡入淡出的元素，独立于页面上可能存在的任何其他淡入淡出元素。

tryDoFade函数检查元素的不透明度是否应发生变化。如果不透明度正在发生变化，它会进行更改(使用requestAnimationFrame，这应该比setInterval更平滑)，并继续检查是否应该进行更改。一旦完全不透明或透明，tryDoFade将停止调用自己。

let makeFadeyElem = () => {
let elem = document.createElement('div');
elem.style.display = 'inline-block';
elem.style.width = '100px';
elem.style.height = '100px';
elem.style.backgroundColor = '#ff8000';
elem.style.opacity = 0;

let opacity = 0;    // Current raw opacity value
let fadeInc = 0.05; // Amount to fade each frame
let state = 'disappeared'; // disappeared, appearing, appeared, disappearing

let tryDoFade = () => requestAnimationFrame(() => {
let changed = false;
if (state === 'appearing' && opacity < 1) opacity = Math.min(1, opacity + fadeInc);
else if (state === 'disappearing' && opacity > 0) opacity = Math.max(0, opacity - fadeInc);
elem.style.opacity = opacity;
// Enter a rest state if opacity maxes out in either direction
if (opacity === 0) state = 'disappeared';
else if (opacity === 1) state = 'appeared';
// Keep animating if not in a rest state
if (state === 'disappearing' || state === 'appearing') tryDoFade();
});

// Mousing over or out set the element into a non-rest state
elem.onmouseover = () => (state = 'appearing') && tryDoFade();
elem.onmouseout = () => (state = 'disappearing') && tryDoFade();

return elem;
};
// Make 30 such elements:
for (let i = 0; i < 30; i++) document.body.appendChild(makeFadeyElem());