Question

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

此处有问题的图像位于该叠加层内，但其位置设置为固定，因此无法滚动。在叠加层出现之前，它会出现在叠加层的顶部，这就是我将其延迟一点的原因。那部分工作正常。这是我的代码：

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

    });

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

我需要找到一种方法来重置＆＃39; 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有一个内置的＆＃34; delay（）＆＃34;方法

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

B中。当你说＆＃34;重置＆＃34; DIV，你的意思是DIV的HTML内容还是div的CSS值？ HTML内容可以通过以下方式重置：

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

CSS可以＆＃34;重置＆＃34;只需使用＆＃34; css（）＆＃34;更改值即可方法

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

℃。总的来说，我认为你的方法可能有点偏差。应该发生什么，当你点击地图上的一个元素时，jQuery会创建叠加div，将它注入到DOM中（不透明度0，因此它不可见）然后使用淡入将其优雅地设置为动画。页。在关闭时，它应淡出，然后清空下一个叠加的内容。

希望有所帮助。