在淡入淡出之间淡入/淡出

Question

所以这是东西。 我看到了这个网站： http : //laneandassociates.co/english-mustard-scottish-oats ，我绝对不知道它们是如何褪色的。

关于它们的淡入淡出效果的妙处在于，可以在淡入淡出过程的中间通过单击将其“停止”。

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

问题是，我什至找不到淡入淡出的代码。 有人可以告诉我他们是如何制作的，以便我可以看看并学习吗？

先感谢您。

Answer 1

该站点使用立方贝塞尔曲线 CSS动画。

这可以通过以下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;
}

困难的部分可能是为所需的动画类型计算正确的参数。 您可以使用此网站来做到这一点 。

这是另一个动画的演示 。

---

要在悬停时删除动画：

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

Answer 2

因此，您可以使用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/ 。