[英]Simple fade in fade out div with jquery on click
这个代码在这里工作,你可以在这里阅读答案 - 我编辑这个以供将来参考。
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');
});
});
你的问题是这行代码:
$('#bank').replace('<div id="fancy"></div>').fadeIn('slow');
jQuery中没有.replace()函数。 删除它,它的工作原理:
$('#bank').fadeIn('slow');
在这里看到: http : //jsfiddle.net/3XwZv/57/
使用以下jQuery代码:
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
您应该使用html()而不是replace()。 另外,假设您要使用以下html替换您的银行div:
<div id="fancy"></div>
试试这个
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').html('<div id="fancy"></div>').fadeIn('slow');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.