Question

所以这就是事情。我看到了这个网站：http://laneandassociates.co/english-mustard-scottish-oats，我绝对无法弄清楚他们是如何做到这一点的。

关于它们的淡化效果的好处是，它可以被停止＆＃34;在点击过程的中间点击。

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

问题是，我甚至找不到淡入淡出的代码。有人能告诉我他们是如何做到的，所以我可以看一看并学习它吗？

提前谢谢。

Answer 1

该网站正在使用 cubic-bezier 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;
}

困难部分可以计算所需动画类型的正确参数。您可以使用this site to do that。

这是demo of another animation。

用于在悬停时删除动画：

.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/。

在淡化之间淡入/淡出

2 个答案: