jQuery 느린 페이드 요소가 간격에 있고 뒤로 이동하면 페이드 인합니다.

Question

jQuery를 사용하여 사용자에게 몇 가지 알림을 표시합니다.이 알림은 jQuery 추가 메서드를 사용하여 화면에 나타납니다. 일단 화면에 나타나면 5 초를 기다린 다음 DOM에서 DOM을 제거하기 전에 천천히 요소가 사라지기 시작합니다. 5 초 후에 페이드가 시작되고 곧바로 페이딩이 시작되지 않아야합니다. 사용자가 요소를 가리키면 요소가 다시 사라지게되고 사용자가 호버를 제거하면 다시 페이드 아웃해야합니다. 그래서이 타임 아웃 후 요소를 페이드 아웃

 setTimeout(function() 
      { 
       $(".Notification").fadeOut("slow", function() 
       { 
        $(this).remove(); 
       }); 

      }, 5000); 

을하지만 사용자가 요소를 가져 가면 그렇게 할 때 그것이 다시 페이드 어떻게해야합니까 사용자가 호버를 제거 할 때 :

지금까지이있다. 다시 페이드 아웃 될 것입니다 (참고 : 페이드가 끝나고 제거 될 때까지 요소를 가져갈 때마다 페이드를 반대로 되돌릴 필요가 없습니다)

아무도 도와 줄 수 있습니까? 필자는 fadeOut 부분을 몇 가지 추가 코드로 둘러싼 간단한 사례라고 생각하지만 고투하고 일부 도움을 주실 것입니다.

페이지에 여러 알림이 표시 될 수 있으므로 화면에 자신의 모양에 따라 페이드 아웃해야하고 동시에 모두 사라지지 않아야합니다.

효과적으로 Microsoft Outlook을 사용할 때 화면의 오른쪽 하단에 표시되는 새 메일 함을 모방합니다.

감사합니다.

Answer 1

사실, setTimeout이 필요하지 않습니다. jQuery는 애니메이션을위한 .delay() 함수를 가지고있다.

/* Initial delay and fading out for 5s */ 
$(".Notification").delay(5000).fadeOut(5000); 

/* If hover, stop the ongoing (or delayed) fadeout, and fadein fast */ 
$(".Notification").mouseenter(function(){ 

    $(this).stop(true, false).fadeIn(500); 
}); 

/* If mouseout, set the element to fadeout slowly after 5s */ 
$(".Notification").mouseleave(function(){ 

    $(this).delay(5000).fadeOut(5000); 
}); 

나는이 실제 예제를 시도하지 않았지만 이와 같이해야합니다.

Answer 2

변수에 setTimeout을 지정하십시오. 사용자가이 변수를 가리킬 때이 변수에 clearTimeout을 호출하십시오.