CODEWITHSUNDEEP
jqueryhtmljquery-ui
ClarkeyBoy
ClarkeyBoy

Reputation: 5010

jQuery - fadeOut callback function not working?

I have the following snippet of code:

$(".caption").click(function () {
    var enlargementDiv = $(this).closest(".image-enlargement");
    enlargementDiv = enlargementDiv.find("div.enlargement");
    enlargementDiv.fadeOut(500, 
       function () {
           enlargementDiv.html($(this).find("div").html()); enlargementDiv.fadeIn(500);
       }
    );
});

This is based in the window.load function. This works if I take the statements in the function and put them after the function; however it doesn't work as it is now. I have a list of captions (currently they are just the product codes for a set of cards, but they will state the actual caption which appears on the card) and on clicking one of these I want the image to fade out, change to the one selected and fade in. However, as I said, this only works if I put the statements outside the function. This means that the user sees the image change suddenly just before fading out, which is not satisfactory.

Can anyone see anything wrong with this? If anyone is thinking of telling me to check the class names etc, please re-read this question and you will see that it does work with the statements outside the callback function!!

Thanks in advance.

Regards,

Richard

Upvotes: 0

Views: 995

Answers (1)

sje397
sje397

Reputation: 41812

Try:

$(".caption").click(function () {
    var $this = $(this);
    var enlargementDiv = $this.closest(".image-enlargement");
    enlargementDiv = enlargementDiv.find("div.enlargement");
    enlargementDiv.fadeOut(500, 
       function () {
           enlargementDiv.html($this.find("div").html()); enlargementDiv.fadeIn(500);
       }
    );
});

Upvotes: 2

Related Questions