延遲顯示圖像僅適用一次

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，因此不可見），然後使用淡入來優雅地將其設置到頁面中。最後，它應該淡出，然後清空下一個疊加層的內容。

希望有所幫助。