jQuery는 CSS DIV 위치를 지연시켰다

Question

약 5 초의 비활성의 시간 초과 후 메뉴 바가 부분적으로 숨기려고 노력하고 있습니다. 메뉴는 페이지 상단에서 20px로 배치되어 있으며 기본 아이디어는 메뉴의 작은 섹션이 메뉴가 이동 한 후에도 여전히 표시되도록 메뉴의 작은 섹션이 여전히 보일 것입니다. 감각!).

나는 애니메이션 측면을 관리했지만 타임 아웃은 아닙니다. 어떤 아이디어?

Answer 1

불행히도 jQuery에는 지연 기능이 없습니다. 그러나, 당신은 비열하고 더 많은 해킹을 사용하여 1에서 1까지 요소의 불투명도를 애니메이션으로하여 지연을 시뮬레이션 할 수 있습니다.

$('#visibleElement')               // Assuming the element is already shown
  .animate({opacity: 1.0}, 3000);  // do nothing for 3 seconds

마우스가 떠난 후 5 초 후 메뉴를 미끄러 뜨리려면 다음을 수행 할 수 있습니다.

$('#menuDiv').mouseout(function(){
  .animate({opacity: 1.0}, 5000)
  .animate( slide up etc...
});

Answer 2

Hoverintent를보십시오.http://cherne.net/brian/resources/jquery.hoverintent.html

따라서 사용자가 메뉴와의 상호 작용을 중지 한 후 작업을 수행하기가 매우 쉽습니다.

Answer 3

당신은 사용해야합니다 mouseout 이벤트 div 이는 다음과 같은 기능을 구현하는 메뉴를 나타냅니다.

var waitingForMenuToHide = false;

function myOnMouseOut() {
    waitingForMenuToHide = true;
    setTimeout(function() {
        if (waitingForMenuToHide) {
            // Hide the menu div...
        }
    }, 5000);
}

그리고 mouseover 재설정하는 이벤트 waitingForMenuToHide 변하기 쉬운:

function myMouseOver() {
    waitingForMenuToHide = false;
}

Answer 4

마우스 아웃 이벤트에서 콜백으로 타임 아웃을 시작하여 요소를 스크롤합니다. Mousover 이벤트에서 타임 아웃이 있으면 다음을 사용하여 죽입니다.

clearTimeout(timer); 

그래서 그것은 다음과 같습니다.

var timer;
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */});
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});