Question

I’m trying to make a simple gallery with buttons that allow the user to cycle through images. When the user clicks a button and the image changes, I’d like it to fade in but it doesn’t appear to be doing anything? Here is what i have:

$(function () {
    $("#homeGalleryControls li a").click(function () {
          var image = $(this).attr("rel");
          $('#galleryImage').fadeIn('slow');
          $('#galleryImage').attr("src", image);
          $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
          $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
    });
});

Can anyone see what’s wrong here?

Thankyou

Answer 1

Got it working, used the following incase anyone else was wondering:

$(function () {
        $("#homeGalleryControls li a").click(function () {
            var image = $(this).attr("rel");
            $('#galleryImage').fadeOut('slow', function () {
                $('#galleryImage').attr("src", image);
                $('#galleryImage').fadeIn('slow');
            });
            $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
            $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
        });
    });