延迟 5 秒后用文字替换图像答案

【问题标题】：Replace image with text after 5 seconds delay延迟 5 秒后用文字替换图像
【发布时间】：2012-05-19 18:57:12
【问题描述】：

目标
使用 jQuery 在延迟 5 秒后将一个 div 替换为另一个。

说明
我想在一个 div 中显示一个图像 5 秒钟，然后它应该被另一个 div 中的文本替换。

HTML 代码

<div id="outer">Image here</div>
<div id="text">Text here</div>

jQuery 代码

<script type="text/javascript">
    $(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer").remove();
            });
         }, 5000);
     });
</script>

提前致谢。

【问题讨论】：

标签： jquery image html text replace

【解决方案1】：

试试这个：

<script type="text/javascript">
        $(document).ready(function()
        {
            setTimeout(function()
            {
                $("div#outer").fadeOut("slow", function ()
                {
                    $("div#outer").hide();
                    $("div#text").show();
                });
             }, 5000);
         });
    </script>

或者，如果您实际上是想将 div text 中包含的文本移动到 div outer，请执行以下操作：

<script type="text/javascript">
            $(document).ready(function()
            {
                setTimeout(function()
                {
                    $("div#outer").fadeOut("slow", function ()
                    {
                        $("div#outer").html($("div#text").html()); //.html or .text
                    });
                 }, 5000);
             });
        </script>

【讨论】：

【解决方案2】：

这里是演示链接：http://jsfiddle.net/pHJgP/8/

HTML 代码：

<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png" alt="" /></div>
<div id="text" style="display:none">Text here</div>

Jquery 代码：

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").remove();                
                $("div#outer").html($("div#text").text());
                $("div#outer").show();
            });
         }, 5000);
     });

希望这对你有帮助。

【讨论】：

我们可以循环遍历 settimeout
否则只会淡出一次
嗯，是的，你可以使用循环。
这很有帮助，我需要先隐藏文本，然后在图像消失后显示文本。这是我在描述中忘记提到的事情，但你比我领先一步 :)

【解决方案3】：

如果您的问题是让文本仅在图像消失后显示 - 那么这里有一个选项可以让您不必对文本容器执行任何 JavaScript 工作。

只需将图像容器放在文本上，然后像现在一样淡出，如下所示：

JavaScript

$(function() {
    setTimeout(function()
    {
        var $el = $('div#outer');        
        $el.fadeOut("slow", $el.remove);
     }, 5000);
});

HTML

<div class="transition-wrapper">
    <div id="outer">Image here</div>
    <div id="text">Text here</div>
</div>

CSS

注意这里的颜色只是为了说明

.transition-wrapper {
    position: relative;    
    width: 500px;
    height: 500px;
}
#outer {
    position:absolute;
    z-index: 100;
    width: 500px;
    height: 500px;
    background: red;
}
#text {
    background: blue;
    height: 100%;
    width: 100%;
}

JSFiddle

http://jsfiddle.net/mJUzr/

【讨论】：