显示设定时间段的页面元素

Question

快速提问。我试图使用javascript，jquery或php来实现它，所以当我点击链接时，它会将我的页面上的静态图像替换为另一个图像，持续15秒，然后恢复为原始图像。什么是最好的方法呢？

Answer 1

你可以为此做一个简单的超时：

$('#myLink').click(function() {
  $('#myImg').attr('src', 'newImg.jpg');
  setTimeout(function() { $('#myImg').attr('src', 'oldImg.jpg'); }, 15000);
});

或者，如果你想要淡入淡出，请让另一张图像绝对定位，如下所示：

<div>
 <img id="tempImg" src="tempImg.jpg" style="position:absolute; display:none; z-index: 2;" />
 <img src="oldImg.jpg" />
</div>

那么jQuery就像这样：

$('#myLink').click(function() {
  $('#tempImg').fadeIn().delay(15000).fadeOut();
});

确保图像具有相同的尺寸（对于外观，这是可选的），临时图像将在静态图像的顶部淡入，等待15秒，然后淡出。