顯示動畫GIF後顯示信息

以下是我的代碼，我已經有GIF動畫工作，但當GIF被禁用時，我需要在5秒後顯示一條消息或其他圖片。在此先感謝顯示動畫GIF後顯示信息

的JavaScript

<script type= "text/javascript"> 
function show() { 
    document.getElementById("processing").style.display="block"; 
    setTimeout("hide()", 5000); // 5 seconds 
} 

function hide() { 
    document.getElementById("processing").style.display="none"; 
} 
</script>

HTML

<p> 
    <input type="button" id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" /> 
</p> 
<div id="processing" style="display:none;"><img src="images/processing.gif" id= "processing" alt="Processing transaction!" /></div>

來源

2013-02-25 Kaos

您的代碼包含足夠的信息，可以讓您做到這一點。只需將其添加到hide（）函數。使用不同的ID並顯示該元素。 – 2013-02-25 17:34:51

目前還不清楚你的問題是什麼。你有什麼困難？你嘗試了什麼？ – 2013-02-25 17:39:10

感謝Diodeus，但我如何使用隱藏功能呢？我只需要動畫GIF disaapear（它已經在5秒後），然後我希望它被一個消息所取代，表示已提交 – Kaos 2013-02-25 17:43:03

首先，你有兩個項目與日e相同的編號processing。從圖像中更改ID，並添加一個帶有消息的div

<p> 
    <input type="button" id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" /> 
</p> 
<div id="processing" style="display:none;"> 
    <img src="images/processing.gif" id="processing-img" alt="Processing transaction!" /> 
    <div id="processed-msg" style="display:none">Finished processing </div> 
</div> 



function hide() { 
    document.getElementById("processing-img").style.display="none"; 
    document.getElementById("processing-msg").style.display="block"; 
}

來源

2013-02-25 17:49:39

http://jsfiddle.net/V4UU2/4

<style> 
#processing, #message { 
    display: none; 
} 
</style> 

<p> 
    <input type="button" id="submit" value="Make Transfer" class="submit_button" onclick="show()" /> 
</p> 

<div> 
    <img src="http://placehold.it/150x150" id="processing" alt="Processing transaction!" 
    /> 
    <div id="message">My message.</div> 
</div> 

<script> 
    function hide() { 
    document.getElementById("processing").style.display = "none"; 
    document.getElementById("message").style.display = "block"; 
    } 

</script>

來源

2013-02-25 17:48:32 isherwood

謝謝你們，我很高興我能解決這個問題。我作爲一個塊顯示，這就是爲什麼它不工作。但它現在完美運行 – Kaos 2013-02-25 18:03:04

不客氣。一定要選擇一個答案。 – isherwood 2013-02-25 18:05:18

讓我澄清一下......一定要選擇第一個正確答案和/或帶有工作演示的答案。 ;-) – isherwood 2013-02-25 18:57:39

顯示動畫GIF後顯示信息

回答

相關問題