Простое увядание в выпадающем div с jquery на клике

ЭТОТ КОД НА ЗДЕСЬ РАБОТАЕТ, вы можете прочитать ответы здесь - я редактирую это для справок в будущем.

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');
        });
    });

Live DEMO, который работает

Ответ 1

Ваша проблема с этой строкой кода:

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

В jQuery нет функции .replace(). Удалите это, и он работает:

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

Смотрите здесь: http://jsfiddle.net/3XwZv/57/

Ответ 2

Используйте следующий код jQuery:

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

Ответ 3

Вы должны использовать html() вместо replace(). Кроме того, если вы хотите заменить свой банковский div следующим html:

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

Попробуйте это

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