延遲幾天顯示圖像的功能

Question

我想知道是否有可能隨着時間的推移減少圖像/元素的不透明度以揭示圖像/元素的不透明度。

例如，使用jquery定時器倒計時到3天前的時間，我們可以使用該時間來顯示3天長的動畫或不透明度，以在定時器耗盡時顯示底層圖像嗎？

有關我們如何構建這個的任何想法？

Answer 1

你的問題很廣泛，所以我會假設動畫應該從頁面加載開始運行三天。假設頁面將打開三天，您可以有一個長期運行的CSS動畫。不需要JavaScript。

如果頁面將要關閉，那麼JavaScript需要將運行值保存在Web存儲或cookie中。然後可以在頁面下次加載時計算不透明度，並且動畫將從那裏繼續。

這裏是CSS動畫的演示：

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; 
 
    } 
 
}

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

Answer 2

您可以使用jQuery .fadeOut以淡入淡出的元素，但是這隻能在單一頁面實例工作。換句話說，每次有人刷新頁面時都會重新開始。這是你想要的嗎？

如果您希望它在給定時間訪問該網站的任何人都面臨相同的問題，那麼您可以在javascript中創建一個日期元素並根據該日期元素進行計算。這需要一點工作，但它應該是可能的。

創建使用

var currDate = new Date(); 

然後計算出多久，直到最後「兜底」的時間，並把它看作從開始的總時間的百分比在頁面加載一個新的Date對象（在這個衰落「開始「）並將其指定爲當前不透明度。

接下來看看剩下多少時間，並開始一個新的jQuery .fadeOut動畫，並將該數量作爲持續時間。

您會希望將「hider」放置在使用位置：絕對位置的頂部。

這是對一種可能的解決方案的很高層次的描述。