Question

我想知道是否有可能随着时间的推移减少图像/元素的不透明度以显示其下的内容。

例如，使用jquery计时器倒数提前3天，我们可以使用该时间显示3天的动画或不透明度，以便在计时器用完时显示基础图像吗？

关于我们如何建立这个的任何想法？

Answer 1

你的问题很广泛，所以我假设动画应该从页面加载开始运行三天。假设页面将打开三天，您可以拥有一个长时间运行的CSS动画。不需要JavaScript。

如果要关闭该页面，则需要JavaScript在Web Storage或cookie中保留运行值。然后可以在下次加载页面时计算不透明度，并且动画将从那里继续。

以下是CSS动画的演示：

＆＃13;

img {
  opacity: 0;
  -webkit-animation-name: reveal;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 259200s;
  animation-name: reveal;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 259200s;
}
@-webkit-keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<img src='https://placekitten.com/g/200/300' alt='kitten'>

＆＃13;

Answer 2

您可以使用jQuery .fadeOut淡化元素，但这只适用于单个页面实例。换句话说，每次有人刷新页面时都会重新开始。这是你想要的吗？

如果您希望在给定时间访问该网站的任何人都面对同样的情况，那么您可以在javascript中创建一个日期元素并根据该值进行计算。它需要做一些工作，但它应该是可能的。

使用

在页面加载时创建新的日期对象

var currDate = new Date();

然后计算到结束的时间长度＆＃34;显示＆＃34;时间并将其作为从开始时的总时间的百分比（当此消退＆＃34;开始时＃34;）并将其指定为当前不透明度。

接下来看看还剩多少时间并开始一个新的jquery .fadeOut动画，其数量为持续时间。

你想要放置＆＃34; hider＆＃34;在使用position：absolute。

显示的内容之上

这是对一种可能解决方案的高级描述。

延时功能可在几天内显示图像

2 个答案: