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

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

请注意，我使用的是带有背景图像的 <div> 标记，而不是 <img> 标记。这更容易使用 css 居中。

Answer 2

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

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

工作演示