Эффект наведения не завершает анимацию при использовании Fancybox

Question

У меня проблемы с анимацией при наведении, когда я использую Fancybox.Когда я нажимаю на изображение и всплывающее окно Fancybox, анимация не заканчивается.

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

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

Это как анимация, которая останавливается.

Вот скрипка

Как вы можете видеть, если вы нажмете на изображение, Fancybox будет работать, но изображение не завершит анимацию.

Как я могу это решить?

Answer 1

Если я правильно понимаю ваш вопрос, проблема возникает из-за того, что при запуске fancybox браузер не может обнаружить событие «onmouseout» и, следовательно, изображение не возвращается в прозрачность 1.

Простым решением было бы вручную запустить сброс непрозрачности при запуске fancybox:

// 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
); 

Вы можете попробовать это здесь: http://jsfiddle.net/6aDP5/2/

А вот код окончательного поведенияВы искали: 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();
            }
        });
});