web-dev-qa-db-ja.com

クリックでjqueryを使用した単純なフェードインフェードアウトdiv

ここにあるこのコードは、ここにある回答を読むことができます。今後の参考のためにこれを編集します。

[〜＃〜] html [〜＃〜]：

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div id="btn-bk"><a href="#">back</a></div>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

[〜＃〜] css [〜＃〜]：

#bank {display:none;}
#btn-bk {display:none;}

Javascript：

    $('#btn').click(function(e){    
    $('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk').fadeIn('slow');
    });
});

    $('#btn-bk').click(function(e){    
        $('#bank, #btn-bk').fadeOut('slow', function(){
            $('#fancy, #btn').fadeIn('slow');
        });
    });

動作するライブデモ

javascriptjqueryhidefade
10
user1562679

問題は次のコード行にあります。

$('#bank').replace('<div id="fancy"></div>').fadeIn('slow');

JQueryには.replace（）関数はありません。それを削除すると動作します：

$('#bank').fadeIn('slow');

こちらをご覧ください： http://jsfiddle.net/3XwZv/57/

11
Surreal Dreams

次のjQueryコードを使用します。

$('#btn').click(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});
3
suresh.g

Replace（）の代わりにhtml（）を使用する必要があります。また、銀行のdivを次のhtmlに置き換えると仮定します。

<div id="fancy"></div>

これを試して

$('#btn').click(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').html('<div id="fancy"></div>').fadeIn('slow');
    });
});
2
bipen