CODEWITHSUNDEEP
javascriptjqueryhidefade
user1562679
user1562679

Reputation: 145

Simple fade in fade out div with jquery on click

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

Live DEMO that works

Upvotes: 13

Views: 96095

Answers (3)

bipen
bipen

Reputation: 36531

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

Upvotes: 2

suresh gopal
suresh gopal

Reputation: 3156

Use the following jQuery code:

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

Upvotes: 3

Surreal Dreams
Surreal Dreams

Reputation: 26380

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/

Upvotes: 14

Related Questions