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");
    });

就像动画冻结一样。

这是fiddle。

如您所见，如果您单击图像，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();
            }
        });
});

使用Fancybox时，悬停效果无法完成动画

1 个答案: