当我单击一个确切的链接时，应该会出现一个带有jquery和超时的图像

Question

我需要做什么，因为我是jquery的新手，如下所示:我想:当用户点击一个确切的链接时。一个确切的图像应该出现在屏幕的中间，有淡入淡出效果或没有淡出效果(无论更容易)，然后它将在4秒后消失。

在我的头脑中，我包含了这样的内容：

<script src="http://code.jquery.com/jquery-latest.js"></script>

我在正文中包含了以下内容：<a href="#" id="myLink">click</a> <img src="achievement.png" id="myImage" style="display:none">

我想明白了，现在我该如何设置它来覆盖网站的内容呢？CSS可能

Answer 1

下面这样的内容如何：

$('#myLink').click(function(){
    $('#myImage').fadeIn().delay(4000).fadeOut();
});

下面是一个使用css在屏幕上居中显示图像的好方法：

html：

<div id="myImage"></div>

css：

#myImage{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: url(path/to/image.png) center center no-repeat;
}

请注意，我使用的是带有背景图像的标记，而不是标记。使用css可以更容易地居中。

Answer 2

您还可以使用colorbox插件轻松地以模式显示图像，此插件还具有许多其他功能。在4 sec之后自动关闭colorbox所需的代码如下

   $('.colorbox').colorbox({
        onOpen: function(){
           window.setTimeout(function() {
             $.colorbox.close();
          }, 4000);
        }
    });

Working Demo