javascript - 10 秒后隐藏图像

Question

有没有一种方法可以使用 HTML 和 CSS 在 10 秒后隐藏图像？如果不可能，是否有任何简单的方法可以仅使用 JavaScipt(不是 jQuery，我不想将 jQuery 库添加到我的 HTML 页面，除非它非常需要)。

Answer 1

立即隐藏 -

setTimeout(function() {
  document.getElementById('imageID').style.display='none'
}, 10*1000);

编辑:- 使用纯 JS 动画隐藏

function start(){

window.timerID =  setInterval(function() {
var aOpaque = document.getElementById('imageID').style.opacity;
aOpaque = aOpaque-.1;

aOpaque = aOpaque.toFixed(1);   

document.getElementById('imageID').style.opacity = aOpaque;

if(document.getElementById('imageID').style.opacity<=0)
clearInterval(window.timerID);
},1000);
}

window.onload = function(){start();} 

在标记中 <image id="imageID" style="opacity:1">记得给style="opacity:1"内联 css 属性。

请注意 <img>有一个 alt可能影响页面搜索结果的属性并执行 display:none可能会对搜索结果产生不利影响，因此开发人员使用类似 - transform: translateX(); 的内容并通过在 translateX(value) 中给出负值来将 html 标记放在 View 之外.