Мерцание при наведении курсора на несколько элементов - PullRequest
Новая
       22

Мерцание при наведении курсора на несколько элементов

0 голосов
/ 20 июня 2011

Я создаю интерактивное приложение, позволяющее людям настраивать двери. Чтобы позволить им выбрать почтовый ящик, я хочу показать его, когда они парят над дверью, и убрать его, когда они парят. Это работает нормально, но когда я парю над почтовым ящиком, двери «зависают».

Это вызывает странный мерцающий эффект.

Я создал jsfiddle , показывающий этот эффект

Просто интересно, есть ли у кого-нибудь решение для этого? Мне в основном нужно, чтобы почтовый ящик оставался на месте, когда пользователь наводит дверь, мне также нужно состояние щелчка для двери и почтового ящика.

1 Ответ

0 голосов
/ 21 июня 2011

не уверен, что это самый эффективный метод, но он работает. jsfiddle 

var doorClickState, letterbox, inletterbox = false;

$(function() {

    var paper = Raphael("canvas", 330, 457);

    //draw the door
    doorClickState = paper.path("M0,0v200h117V0H0z").translate(0, 0).attr({
        fill: "#FF0000",
        stroke: 0,
        opacity: 0.9
    }).toFront();

    //draw and hide letterbox
    letterbox = paper.path("M0,0v15h60V0H0z").translate(30, 100).attr({
        fill: "#000000",
        stroke: 0,
        opacity: 0.9
    }).hide();


    //click states for both
    doorClickState.click(function() {
        alert('door clicked');
    });
    letterbox.click(function() {
        alert('letterbox clicked');
    });


    doorClickState[0].onmouseover = function() {
        letterbox.show();
    }
    letterbox[0].onmouseover = function() {
        inletterbox = true;
    }
    letterbox[0].onmouseout = function() {
        inletterbox = false;
    }

    doorClickState[0].onmouseout = function() {
        setTimeout(function() {
            if (!inletterbox) {
                letterbox.hide();
            }
        }, 20);
    };

});
...