3

目標
jQueryを使用して5秒遅れた後、1つのdivを別の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>

前もって感謝します。

4

3 に答える 3

4

これを試して： 

<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>
于 2012-05-11T07:09:02.110 に答える
1

問題が画像が消えた後にのみテキストを表示することである場合-テキストコンテナでJavaScriptの作業を行う必要をなくすオプションがここにあります。

画像コンテナをテキストの上に配置するだけで、次のように、現在のようにフェードアウトします。

<strong> 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/

于 2012-05-11T07:15:00.467 に答える
1

これがデモリンクです：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);
     });

これがお役に立てば幸いです。

于 2012-05-11T07:22:49.680 に答える