在淡入淡出之间淡入淡出 in/out

Question

事情是这样的。我看到了这个网站：http://laneandassociates.co/english-mustard-scottish-oats 我完全搞不懂他们是如何做渐变的。

它们的淡入淡出效果的妙处在于，可以通过单击 "stopped" 在淡入淡出过程的中间。

为了更好地理解：假设淡入持续时间为 1000。如果我在淡入（例如）700 时单击，淡入立即停止在 700 并开始淡出回到 0。然后淡入下一张图片从0开始。看起来真的很流畅。

问题是，我什至找不到淡入淡出的代码。谁能告诉我他们是怎么做的，这样我就可以看一看并学习它？

提前致谢。

Answer 1

因此，您可以使用 jQuery 进行淡入淡出：https://api.jquery.com/category/effects/fading/。您可以使用 fadeIn 方法淡入一个元素，使用 fadeOut 方法淡出一个元素。要使元素在单击时停止淡出，您可以这样做：

$('mySelector').on('click', function() {
    myElement.stop(); // This stops the fade from continuing
});

通过使用 stop 方法，您可以暂停动画或提前完成动画。有关 stop 动画的更多详细信息，请查看此处的文档：https://api.jquery.com/stop/.

Answer 2

该站点正在使用 cubic-bezierCSS 动画。

这是通过一些 CSS 实现的，如下所示：

.element.animated {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),visibility 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    visibility: hidden;
}

困难的部分可能是为您想要的动画类型计算正确的参数。您可以使用 this site to do that.

这里是demo of another animation.

移除鼠标悬停时的动画：

.element.animated:hover {
    opacity: 1;
    transition: none;
}

在淡入淡出之间淡入淡出 in/out

Fade in/out in between fades

javascript

jquery

fade

fadeout

fadein