延迟显示图像仅适用一次

Question

我有一种情况，需要延迟页面上某个图像的显示。该页面是美国的图像地图。当用户点击某个状态时，在地图上打开一个jQuery动力叠加层以显示该州的信息。

这里有问题的图片在叠加层内，但其位置设置为固定，因此不会滚动。叠加层出现之前，它会出现在叠加层之上，这就是为什么我要延迟一点。这部分工作正常。这里是我的代码：

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

    });  

的问题是，当用户点击重叠的关闭（X）按钮将其关闭，在图像的延迟褪色停止延迟和衰落在以后的每一次叠加的。用户通过点击地图上的另一个状态打开时显示图像没有延迟并淡入。换句话说，它完全停止工作，图像在叠加之前弹出，这是我用delay/fadeIn解决的原始问题。

我需要找到一种方法来“复位”该div到其原始状态，以便当用户单击地图上的下一个状态并弹出新的覆盖图时，图像会延迟并淡入，就像它在第一个覆盖。

我试图添加fadeOut（）和hide（）到关闭按钮，认为它会重置该div，但这只是使它不会再次显示div后单击关闭按钮。

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

任何想法？

顺便说一句...这不是一个普通的网站。它将从平板电脑上加载的本地副本显示。正在使用的浏览器（Dolphin）不支持CSS转换，所以这是不可能的。

Answer 1

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

答：对于初始延迟，您不需要setTimeout。 jQuery有一个内置的“delay（）”方法。

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

B.当你说“重置”DIV时，你的意思是DIV的HTML内容还是div的CSS值？ HTML内容可以通过以下方式进行重置：

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

只需使用“css（）”方法更改值即可“重置”CSS。

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

C.总体而言，我认为你的方法可能有点偏离。应该发生的事情是，当你点击地图上的一个元素时，jQuery创建覆盖div，将其注入DOM（不透明度为0，因此不可见），然后使用淡入来优雅地将其设置到页面中。最后，它应该淡出，然后清空下一个叠加层的内容。

希望有所帮助。