Simple fade in fade out div with jquery on click
94,595
Solution 1
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:
$('#bank').fadeIn('slow');
See it here: http://jsfiddle.net/3XwZv/57/
Solution 2
Use the following jQuery code:
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
Solution 3
You should use html () instead of replace(). Also, assuming you want to replace your bank div with the following html:
<div id="fancy"></div>
Try this
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').html('<div id="fancy"></div>').fadeIn('slow');
});
});
Author by
user1562679
Updated on July 09, 2022Comments
-
user1562679 almost 2 years
THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference.
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'); }); });