Javascript 单击时使用 jquery 进行简单的淡入淡出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12584481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple fade in fade out div with jquery on click
提问by user1562679
THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference.
此代码在此处有效，您可以在此处阅读答案-我对其进行了编辑以供将来参考。
HTML:
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:
CSS:
#bank {display:none;}
#btn-bk {display:none;}
Javascript:
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');
});
});
回答by Surreal Dreams
Your problem is with this line of code:
你的问题是这行代码：
$('#bank').replace('<div id="fancy"></div>').fadeIn('slow');
There is no .replace() function in jQuery. Remove that and it works:
jQuery 中没有 .replace() 函数。删除它，它的工作原理：
$('#bank').fadeIn('slow');
See it here: http://jsfiddle.net/3XwZv/57/
在这里看到它：http: //jsfiddle.net/3XwZv/57/
回答by suresh.g
Use the following jQuery code:
使用以下 jQuery 代码：
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
回答by bipen
You should use html () instead of replace(). Also, assuming you want to replace your bank div with the following html:
您应该使用 html() 而不是 replace()。另外，假设您想用以下 html 替换您的银行 div：
<div id="fancy"></div>
Try this
尝试这个
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').html('<div id="fancy"></div>').fadeIn('slow');
});
});
