12

此代码在此处有效,您可以在此处阅读答案-我对其进行编辑以供将来参考。

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

有效的现场演示

4

3 回答 3

14

您的问题在于这行代码:

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

jQuery 中没有 .replace() 函数。删除它,它的工作原理:

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

在这里看到它:http: //jsfiddle.net/3XwZv/57/

于 2012-09-25T14:01:08.777 回答
3

使用以下 jQuery 代码:

$('#btn').click(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});
于 2012-09-25T14:03:55.343 回答
2

您应该使用 html() 而不是 replace()。此外,假设您想用以下 html 替换您的银行 div:

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

尝试这个

$('#btn').click(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').html('<div id="fancy"></div>').fadeIn('slow');
    });
});
于 2012-09-25T14:08:12.633 回答