Question

I have a question regarding Jquery, im trying to throw up a status box which shows a successful save to the end user.

My problem is that after its shown i cant click on any input fields because the div opacity is set to 0 rather than display none, here is my code:

function messageBox(x){

n = x.indexOf('SUCCESS');

    if(n!==-1){
        $("#messageBoxSuccess").text(x.replace('SUCCESS', ''))
        $("#messageBoxSuccess").fadeTo(1000, 1);
        $("#messageBoxSuccess").delay(500);
        $("#messageBoxSuccess").fadeTo(1000, 0);

    }else{
        $("#messageBoxError").text(x.replace('ERROR', ''))
        $("#messageBoxError").fadeTo(1000, 1);
        $("#messageBoxError").delay(500);
        $("#messageBoxError").fadeTo(1000, 0);


    }
}

Answer 1

jQuery’s fadeTo has a callback event

.fadeTo( duration, opacity [, callback] )

so you can do

$("#messageBoxError").fadeTo(1000, 0, function(){ $(this).hide() });

to set display: none at the end of the fadeTo.