Showing back div on click after div fade out

Question

I have a form where user click button to update profile. After <div> give them notice it will fade out. It works but the problem is when user click submit button again the <div> will not show again. My code in :

function(data){

    if (data.response==1) 
    { 
        $('#stage').html("<div style=\"background-color:#75A838; padding-left:20px;\">Your profile has been updated!</div>"); 
    }
    else if (data.response==0) {
    $('#stage').html("<div style=\"background-color:#FF7800; padding-left:20px;\">No changes have been made to your profile!</div>");
   }
            $('#stage').delay(2000).fadeOut();

html code

 <div id="stage" style="color: white;"></div>

What did I miss? Help me with this please. Thank you.

On a side note it would be better to not use inline styles. Instead use addClass() and removeClass() — Joe Spurling, Jun 02 '13 at 11:53
@luk2302 - presumably this function is fired when a button outside this code is clicked. — Joe Spurling, Jun 02 '13 at 11:54
@luk2302 - you are correct. I can only fade it once and on second submit the div failed to display. — sg552, Jun 02 '13 at 11:59

score 5 · Accepted Answer · edited Jun 02 '13 at 11:59

5

Once fadeOut() completes it will set the div to display:none; Here's updated code:

function(data){

    if (data.response==1) { 
        $('#stage').show().html("<div style=\"background-color:#75A838; padding-left:20px;\">Your profile has been updated!</div>"); 
    } else if (data.response==0) {
        $('#stage').show().html("<div style=\"background-color:#FF7800; padding-left:20px;\">No changes have been made to your profile!</div>");
    }

    $('#stage').delay(2000).fadeOut();

}

The .show() on your div will make sure the display:none; is removed from the div.

edited Jun 02 '13 at 11:59

Ishank

2,860
32
43

answered Jun 02 '13 at 11:49

Joe Spurling

967
11
22

Yes. Thank you. That solved it. I shall read up show() function once I got time insya-Allah. – sg552 Jun 02 '13 at 12:02
Thanks @Joe it just helped me to solved my piece of code $('#stage').html(message).show().delay(5000).fadeOut(400). – Mohammed Moinuddin Waseem Jun 01 '18 at 07:26

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

here's a few links that might be of interest :

jquery fadein fadeout

another of interest

some more of interest

edited May 23 '17 at 11:59

Community

1
1

answered Jun 02 '13 at 11:50

ajt

553
8
25

Showing back div on click after div fade out

2 Answers2