How to create a fading label in JQuery / ASP.NET after a button press

Question

I think that this should be pretty easy but I\'m not quite sure how to wire things up.

I have a page on which the user can define a query. When done, the user enters a

Answer 1

Here's a low-tech technique that keeps all the script in your page template: add a $(document).ready() function to the page that executes conditionally based on a page-level variable, like this ...

// In your button's click handler, set this.UserHasClicked to true
var userHasClicked = '<%= this.UserHasClicked %>' == 'True';
$(document).ready(function() {
    if(userHasClicked) {
        $(labelSelector).delay(2000).fadeOut(1000);
    }
});

Answer 2

Something like this...

var buttonFade = function() {
  $('#my .label .selector').fadeOut(2000);
}
setTimeout(buttonFade, 2000);

If you post some of your markup, I could also take a stab at putting the setTimeout() into a function triggered when the label appears.

Answer 3

Start the asp label text as empty.

<asp:Label id="myLabel" runat="server"></asp:Label>

Then you can fade out the label every page load and set the text of the asp label after hitting the button.

Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn.Click
  myLabel.Text = "You hit the button"
End Sub

    $(document).ready(function() {
        $('#myLabel').fadeOut(3000, function() {
            $(this).html(""); //reset the label after fadeout
        });
    });

Answer 4

Call ClientScriptManager.RegisterClientScriptBlock