Question

这个代码在这里工作，您可以在这里阅读答案 - 我编辑这个以供将来参考。

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 that works

Answer 1

你的问题在于这行代码：

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

jQuery中没有.replace（）函数。删除它，它的工作原理：

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

请在此处查看：http://jsfiddle.net/3XwZv/57/

Answer 2

使用以下jQuery代码：

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

Answer 3

您应该使用html（）而不是replace（）。另外，假设您要使用以下html替换您的银行div：

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

试试这个

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

简单淡入淡出淡出div，点击jquery

3 个答案: