div retains its fade before successmessage is finished displaying

Question

can anyone please tell me how to make the div fade partially until the successMessage is finished displayed.............

in the below code the problem is before successMessage is finished the dive retains its fade.........

function see()
{
    var messageDelay = 2000;
    $("#content").fadeTo("slow",0.3);
    $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
    $("#content").animate({opacity:1})
}


<div id="content">
dddddd
<input type="button" value ="click" onclick="see()"/>
</div>


    <div id="successMessage" class="statusMessage"><p>Thanks for sending your message! We'll get back to you shortly.</p></div>

Answer 1

is that what you want?

function see()
{
    var messageDelay = 2000;

    $("#content").fadeTo("slow",0.22,function(){
    $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
        $(this).animate({opacity:1});
    });

    return false;
}

$("#buttonClick").on("click",function(){
    see();
});

working fiddle here: http://jsfiddle.net/a8kSP/2/

I hope it helps.