Simple fade in fade out div with jquery on click

Question

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

please include all the code in the question in case the jsfiddle disappears. — Niklas, Sep 25 '12 at 13:57

score 14 · Accepted Answer · answered Sep 25 '12 at 14:01

14

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/

answered Sep 25 '12 at 14:01

Surreal Dreams

26,055
3
46
61

Beat me to it :) +1 for speed – Kostia Sep 25 '12 at 14:02
Argh!! Awesome... I have been trying so long now, could not understand why it wasnt showing the BANK... Cheers man! Thx again – user1562679 Sep 25 '12 at 14:03
There *is* a .replace() function, is that what you were looking for? Check out the docs at http://docs.jquery.com/, they are very helpful. I often just scan the categories of functions and see if they have what I want. Reading about interesting sounding functions will teach you a lot. – Surreal Dreams Sep 25 '12 at 14:05

score 3 · Answer 2 · edited Sep 25 '12 at 14:11

3

Use the following jQuery code:

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

edited Sep 25 '12 at 14:11

Josh Mein

28,107
15
76
87

answered Sep 25 '12 at 14:03

suresh gopal

3,138
6
27
58

score 2 · Answer 3 · edited Sep 25 '12 at 14:12

2

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

edited Sep 25 '12 at 14:12

Josh Mein

28,107
15
76
87

answered Sep 25 '12 at 14:08

bipen

36,319
9
49
62

I actually stumpled upon another issue - i need a back button, so when its clicked, the bank fade out again and then the fancy fade in again... Is this easy to implement? If possible, i would appreciate if you could add it to the fiddle? – user1562679 Sep 25 '12 at 14:56
not sure is this is what u wanted.. but u can give it a try.. http://jsfiddle.net/3XwZv/62/ – bipen Sep 26 '12 at 05:44

Simple fade in fade out div with jquery on click

3 Answers3

Linked