asp.net jquery fadeout, change text and fadein smoothly

Question

I am using jquery.raty framework to do rating system. I have 5 stars side by side, and next to the stars, I have a label saying "Please rate me". When user click one of the stars to rate, I want label to fade out, change text to "Thank you" and then fade the label in. here is the code:

$('#<%=lbl_force_to_rate.ClientID %>').fadeOut(100);
$('#<%=lbl_force_to_rate.ClientID %>').delay(400).html("Thank you");
$('#<%=lbl_force_to_rate.ClientID %>').delay(400).val("Thank you");
$('#<%=lbl_force_to_rate.ClientID %>').delay(400).fadeIn(400);

It does the job but I see there is a blink happenning. And It changes the text before the fadeout , so the user can see the text changed. then it fades out and fades in. How can I do it smoothly?

thank you

Answer 1

Use the callback when the fading is finished.

And no need to search for the node every time you apply something on it. Use chaining.

$('#<%=lbl_force_to_rate.ClientID %>').fadeOut(100,function(){
   $(this).delay(400).html("Thank you")
    .delay(400).val("Thank you")
    .delay(400).fadeIn(400);
});

Also you might not need the delays if they were some kind of work outs

$('#<%=lbl_force_to_rate.ClientID %>').fadeOut(100,function(){
   $(this).html("Thank you").val("Thank you").fadeIn(400);
});