Executing a jQuery effect on demand. Is it possible?

Question

I was looking the Highlight effect of jQuery's. That effect is really the one I would like to add in my web page.

By looking at the the source code, I noticed that the effect will be reproduced on user's click of the div.

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

In my web page I have an ImageButton

<asp:ImageButton ID="btnFavorite" runat="server" ImageUrl="~/Images/Favorite.png"/>

I would love to perform the highlight effect to the div, when the user clicks on the image button. Is it possible?

UPDATE: If it is possible, could I use something like "OnClientClick=" of the ImageButton, since the imagebutton controls are added dynamically to the web page?

Answer 1

Simply bind a click handler to your image button, like so:

$("#btnFavorite").click(function() {
    // selector for element to highlight
    $("#theDiv").effect("highlight", {}, 3000);
});

Update: If the control is dynamically added/replaced, you can use .live to ensure that the event handler remains attached:

$("#btnFavorite").live("click", function() {
    // selector for element to highlight
    $("#theDiv").effect("highlight", {}, 3000);
});