Jquery 延迟显示图像只工作一次

我有一种情况，我需要延迟页面上某个图像的显示。该页面是美国的图像地图。当用户单击某个州时，该地图上会打开一个jQuery支持的覆盖图，显示该州的信息

这里讨论的图像位于覆盖层内，但其位置设置为固定，因此不会滚动。它在覆盖层出现之前出现在覆盖层的顶部，这就是为什么我要稍微延迟它。那部分很好用。这是我的密码：

$(document).ready(function () {
    setTimeout(function(){
        $('.scrollInst').fadeIn(500);
    }, 3000); 

    });    

问题是，当用户单击覆盖上的“关闭X”按钮以关闭它时，图像的延迟淡入停止延迟和淡入。用户通过单击地图上的另一个状态打开的每个后续覆盖显示图像，没有延迟和淡入。换言之，它完全停止工作，图像在覆盖之前首先弹出，这是我用延迟/fadeIn解决的原始问题

我需要找到一种方法将div“重置”为其原始状态，这样当用户单击地图上的下一个状态并弹出一个新的覆盖时，图像会延迟并淡入，就像在第一个覆盖上一样

我尝试将淡出和隐藏添加到关闭按钮，以为它会重置该div，但这只会使它在单击关闭按钮后不再显示该div

$(".close").click(function(){
    $(this).parents(".overlay").hide("scale", 300, function(){
 $('.scrollInst').css('display','none');
}); 

有什么想法吗

---

顺便说一下。。。这不是一个正规的网站。它将从平板电脑上加载的本地副本显示。正在使用的浏览器不适用于CSS转换，因此这是不可能的。

您的代码示例将非常有用。不过，我想我理解这个问题。这里有一些要点

A.初始延迟不需要设置超时。jQuery有一个内置的延迟方法

$('.scrollInst').delay(300).fadeIn(500);

当你说重置DIV时，你是指DIV的HTML内容还是DIV的CSS值？可通过以下方式重置HTML内容：

$('.whatever-selector').html("");

只需使用CSS方法更改值，即可重置CSS

$('.whatever-selector').css({top: 0, left: 0, etc});

总的来说，我认为你的方法可能有点不合适。应该发生的是，当您单击地图上的一个元素时，jQuery创建覆盖div，将其注入domopacity 0，因此它不可见，然后使用淡入将其优雅地动画化到页面中。在关闭时，它应该淡出，然后清空内容以进行下一次覆盖

希望有帮助