jquery 호버 이벤트 지연?

jquery 호버 이벤트 지연?

jquery에서 호버 이벤트를 지연시키고 싶습니다.사용자가 링크나 레이블을 가리키면 파일에서 읽는 중입니다.사용자가 화면을 가로질러 마우스를 이동하는 경우 이 이벤트가 즉시 발생하지 않도록 합니다.행사를 연기할 수 있는 방법이 있습니까?

감사해요.

코드 예제:

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

업데이트: (2009년 1월 14일) 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

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

이 접근 방식에는 한 가지 문제가 있는데, 일부 인터페이스에는 아이폰의 사파리와 같은 모바일 브라우저와 같은 '호버' 상태가 없습니다.인터페이스 또는 탐색의 중요한 부분을 이러한 장치에서 열 방법이 없는 상태로 숨길 수 있습니다.장치별 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);
    }
});

마우스를 300ms 이상 사용한 경우 이는 단지 <li>를 확장하기 위한 것입니다.

마우스 아웃 이벤트에서 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);
});

언급URL : https://stackoverflow.com/questions/435732/delay-jquery-hover-event