jQuery 호버 이벤트를 지연시겠습니까?

StackOverflow https://stackoverflow.com/questions/435732

문제

jQuery에서 호버 이벤트를 연기하고 싶습니다. 사용자가 링크 나 레이블 위로 호버링 할 때 파일을 읽고 있습니다. 사용자가 마우스를 화면을 가로 질러 이동하는 경우 즉시이 이벤트가 발생하기를 원하지 않습니다. 이벤트가 해고를 지연시키는 방법이 있습니까?

고맙습니다.

예제 코드 :

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

업데이트: (1/14/09)Hoverintent 플러그인을 추가 한 후 위의 코드는 다음과 같이 변경되었습니다. 구현하기가 매우 간단합니다.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}
도움이 되었습니까?

해결책

jQuery에 Hoverintent 플러그인을 사용하십시오. http://cherne.net/brian/resources/jquery.hoverintent.html

그것은 당신이 묘사 한 것에 절대적으로 완벽하며 메뉴의 마우스 오버 활성화가 필요한 거의 모든 프로젝트에서 그것을 사용했습니다 ...

이 접근법에는 하나의 gotcha가 있으며, 일부 인터페이스에는 '호버'상태가 없습니다. iPhone의 Safari와 같은 모바일 브라우저. 그러한 장치에서 열 수있는 방법없이 인터페이스 또는 탐색의 중요한 부분을 숨길 수 있습니다. 장치 별 CSS로이를 해결할 수 있습니다.

다른 팁

호버에서 타이머를 점검해야합니다. 그것이 존재하지 않는다면 (예 : 이것은 첫 번째 호버입니다) 만들어냅니다. 그것이 존재한다면 (즉, 이것은입니다 ~ 아니다 첫 번째 호버), 그것을 죽이고 다시 시작하십시오. 타이머 페이로드를 코드로 설정하십시오.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

나는 jquery가 당신을 위해이 모든 것을 감싸는 함수를 가지고 있다고 확신합니다.

편집하다: 어 그래, 구조에 대한 jQuery 플러그인

Hoverintent가 최상의 솔루션이라는 데 전적으로 동의하지만, jQuery 플러그인의 승인을 위해 길고 장기간의 프로세스가있는 웹 사이트에서 일하는 불행한 잔디가된다면 다음은 나에게 잘 작동하는 빠르고 더러운 솔루션이 있습니다.

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

이것은 단지 확장하기위한 것입니다u003Cli> 마우스가 300ms 이상인 경우.

마우스 아웃 이벤트에서 cleartimeout ()와 함께 settimeout () 호출을 사용할 수 있습니다.

2016 년 Crescent Fresh의 솔루션은 예상대로 작동하지 않았으므로 다음과 같습니다.

$(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});

내 솔루션은 쉽습니다. 사용자가 300ms 이상 OBJ에 마우스 엔터를 유지하는 경우 열기 메뉴를 지연시킵니다.

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top