Question

I’m having problems with a hover animation when I use Fancybox.
When I click on the image and the Fancybox pops up the animation doesn’t finish.

$(".portfolio_item > a").fancybox();

$(".portfolio_item > a img").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });

It’s like the animation freezes.

Here is the fiddle.

As you can see, if you click on the image, the Fancybox works but the image doesn’t finish the animation.

How can I solve it?

Answer 1

If I understand your question correctly, the problem occurs because when fancybox is trigger, the browser couldn’t detect the “onmouseout” event and hence the image doesn’t get fade back into opacity 1.

An easy fix would be to manually trigger the opacity reset when fancybox is triggered:

// Abstract out the reset function
var resetOpacity = function() {
    $(".portfolio_item a img").stop().animate({"opacity": "1"});
}

// Apply the reset on complete
$(".portfolio_item > a").fancybox({'onComplete': resetOpacity});

// Reuse the same reset function on hover out
$(".portfolio_item > a img").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },
    resetOpacity
); 

You can try it out here: http://jsfiddle.net/6aDP5/2/

And here is the code to the final behavior you were looking for:
http://jsfiddle.net/6aDP5/9/

$(".portfolio_item > a").each(function() {
    var thisAnchor = $(this);
    var targetImg = $(this).find("img");

    var fadeOpacity = function() {
        targetImg.stop().animate({"opacity": "0"});
    }
    var resetOpacity = function() {
        targetImg.stop().animate({"opacity": "1"});
    }

    thisAnchor
        .mouseenter(fadeOpacity)
        .mouseleave(resetOpacity)
        .fancybox({
            'onStart': function() {
                thisAnchor.unbind('mouseleave');
                fadeOpacity();
            },
            'onClosed': function() {
                thisAnchor.mouseleave(resetOpacity);
                resetOpacity();
            }
        });
});