Направленное наведение: Наложение не полностью покидает контейнер

Я использую этот плагин: http://www.jqueryscript.net/animation/Mouse-Direction-aware-jQuery-Hover-Effect-Plugin-Directional-Hover.html

Я получил его работать, однако, когда мышь покидает фотографию, позиция наложения не покидает полностью. Я предполагаю, что вычисления в плагине неверны, или у моего css есть некоторые проблемы измерения. Может кто-нибудь мне помочь?

Вы можете посмотреть мои работы здесь: https://jsfiddle.net/7mw2y4m7/

И вот плагин JS, который я использую

(function ($) {

$.fn.directionalHover = function(options) {
    // Extend default plugin options
    var opts = $.extend({}, $.fn.directionalHover.defaults, options);

    // Create bit flags
    var FLAG_T = 1, // top
        FLAG_R = 2, // right
        FLAG_B = 4, // bottom
        FLAG_L = 8; // left

    // Create bit masks
    var tlMask = FLAG_T | FLAG_L,
        trMask = FLAG_T | FLAG_R,
        blMask = FLAG_B | FLAG_L,
        brMask = FLAG_B | FLAG_R;

    function slideOverlay(overlay, direction, px, py, ew, eh, ex, ey) {
        var cornerFlags = 0; // top|right|bottom|left

        if (py - ey <= eh / 2) cornerFlags ^= FLAG_T;
        if (px - ex >= ew / 2) cornerFlags ^= FLAG_R;
        if (py - ey >  eh / 2) cornerFlags ^= FLAG_B;
        if (px - ex <  ew / 2) cornerFlags ^= FLAG_L;

        findSide(cornerFlags, overlay, direction, px-ex, py-ey, ew/2, eh/2);
    }

    function findSide(flags, overlay, direction, x, y, w, h) {
        if (testMask(flags, tlMask)) {
            testTopLeftToBottomRight(x, y, w, h) ? setOverlayPosition(overlay, direction, 0, -w*2) : setOverlayPosition(overlay, direction, -h*2, 0);
        }
        else if (testMask(flags, trMask)) {
            testBottomRightToTopLeft(x, y, w, h) ? setOverlayPosition(overlay, direction, -h*2, 0) : setOverlayPosition(overlay, direction, 0, w*2);
        }
        else if (testMask(flags, blMask)) {
            testBottomRightToTopLeft(x, y, w, h) ? setOverlayPosition(overlay, direction, 0, -w*2) : setOverlayPosition(overlay, direction, h*2, 0);
        }
        else if (testMask(flags, brMask)) {
            testTopLeftToBottomRight(x, y, w, h) ? setOverlayPosition(overlay, direction, h*2, 0) : setOverlayPosition(overlay, direction, 0, w*2);
        }
    }

    function testMask(flags, mask) {
        return (flags & mask) === mask;
    }

    function testTopLeftToBottomRight(x, y, w, h) {
        return (h * x - w * y) < 0;
    }

    function testBottomRightToTopLeft(x, y, w, h) {
        return (w * (y-h) + h * x - w * h) < 0;
    }

    function setOverlayPosition(overlay, direction, top, left) {
        if (direction === 'in') {
            overlay.animate({
                top: top,
                left: left
            }, 0, function() {
                overlay.stop().animate({
                    top: 0,
                    left: 0
                }, opts.speed, opts.easing);
            });
        }
        else if (direction === 'out') {
            overlay.animate({
                top: 0,
                left: 0
            }, 0, function() {
                overlay.stop().animate({
                    top: top,
                    left: left
                }, opts.speed, opts.easing);
            });
        }
    }

    this.css({
        position: 'relative',
        overflow: 'hidden'
    });

    this.find('.' + opts.overlay).css({
        position: 'absolute',
        top: '-100%'
    });

    return this.each(function() {
        var container = $(this);

        container.hover(function(e) {
            slideOverlay(
                container.find('.' + opts.overlay),
                'in',
                e.pageX,
                e.pageY,
                container.width(),
                container.height(),
                Math.floor(container.offset().left),
                container.offset().top
            );
        }, function(e) {
            slideOverlay(
                container.find('.' + opts.overlay),
                'out',
                e.pageX,
                e.pageY,
                container.width(),
                container.height(),
                Math.floor(container.offset().left),
                container.offset().top
            );
        });
    });
};

// Plugin default options
$.fn.directionalHover.defaults = {
    overlay: "dh-overlay",
    easing: "swing",
    speed: 400
};

}(jQuery));

0 ответов

Другие вопросы по тегам