jQuery: fadeout an image when clicking an ASP.NET ImageButton

Question

I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.

I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.

Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.

TIA

EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.

Answer 1

Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...

$('#<%= this.aspbutton.ClientId%>').click(function(){
    $('#myDiv').fadeout("slow");
    return false;
});

I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.

Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.

Answer 2

$('#<%= this.aspbutton.ClientId%>').click(function(){
    var $btn = $(this);
    $('#myDiv').fadeout("slow", function() {
      $btn.unbind('click').click();
    });
    return false;
});

Answer 3

Here's the solution I used:

Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);

function fadeOut() {
        if ($('.mainImage').length > 0) {
            $('.mainImage').fadeOut('normal');
        }
    }

This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.

HOWEVER...

This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.