javascript - 如何在延迟后更改文本 - jQuery

Question

我有两个带有单独 ID 的 div 和一个样式相同的类。

foo_1 有一个 z 索引，因此它位于 foo_2 之上。

<div id="foo_1" class="foo"><p>I'm awesome.</p></div>
<div id="foo_2" class="foo"><p>No, I am.</p></div>

我想做的是让 foo_1 淡出，而 foo_2 在它后面。

我确实尝试过这个；

HTML

<div id="foo_1" class="foo"><p>I'm awesome</p></div>
<div id="foo_2" class="foo" style="display: none;"><p>No, I am.</p></div>

jQuery

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

​谢谢!

Answer 1

setTimeout(function()
    {
        $("#foo_1").fadeOut("slow", function ()
        {
            // remove $("#foo_1").remove(); 
            // line from code, 
            // because, its removing #foo_1 from dom, 
            // so in next strp you can't catch it

            // $("#foo_1").remove();           
            $("#foo_1").html($("#foo_2").text());
            $("#foo_1").show();
        });
     }, 5000);