CODEWITHSUNDEEP
jqueryasp.netfadeinfadeoutraty
Arif Yilmaz
Arif Yilmaz

Reputation: 121

asp.net jquery fadeout, change text and fadein smoothly

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

Upvotes: 0

Views: 883

Answers (2)

Sergio
Sergio

Reputation: 6948

Try this:

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

Upvotes: 0

user2050799
user2050799

Reputation:

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

Upvotes: 1

Related Questions