显示动画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后显示信息

回答

相关问题