0

個々の ID を持つ 2 つの div と、同じスタイルを設定するクラスがあります。

foo_1 には z-index があるため、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);
 });

ありがとう！

4

3 に答える 3

1

あなたがやっていることは少しやり過ぎのように思えます。

要約すると、2 つの div があり、それらは同じ場所に配置されていますが、上部にあるため #foo_1 のみが表示されます。#foo_1 を非表示にして #foo_2 を表示します。

したがって、#foo_1 をフェードアウトしている間に #foo_2 を表示するだけで十分です。

setTimeout(function() {
    // Make #foo_2 visible
    $('#foo_2').show();

    // Fade out #foo_1
    $('#foo_1').fadeOut('slow');
}, 5000);
于 2012-05-19T12:46:56.387 に答える
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);
于 2012-05-19T10:12:01.830 に答える
0

ms のパラメータで標準の jQuery 関数を使用するだけですFadeOut(500), FadeIn(500):

$(document).ready( function ()
{
  $('#foo_1').fadeOut(1500);
  $('#foo_2').text('No, I am!').fadeIn(1000);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo_1' style='display:block;'> I'm awesome </div>
<div id ='foo_2' style='display:none;'></div>

于 2016-03-20T21:55:27.003 に答える