mouseout이 맞는지 여부를 감지하는 방법은 무엇입니까?

Question

는 내가 예 - 작업

Jsfiddle

나는 div 섹션로 마우스 이벤트를 감지하려고으로이 간단한 바이올린있다. 이 이미지에 마우스를 올리면 캡션이 표시됩니다. "Change Image"라고 말합니다. 5 초 후 캡션이 사라집니다.

setInterval을 사용하고 있습니다. 이제이 이미지의 마우스 아웃을하면 Interval 함수를 호출해야합니다.

jQuery에서 mouseout 이벤트를 어떻게 감지합니까?

점프는 - 시도

$(function() { 
     $('.image-profile').mouseover(function() { 
      $('.change-image').stop().show(); 

      if ($('.image-profile').mouseout()== true) { 
       TimeOut(); 
      } 
     }); 

     setInterval(function TimeOut() { 
      $('.change-image').fadeOut() 
     }, 5000 

     ); 
    }); 

Answer 1

$('.image-profile').on('mouseleave', function() { 
    setTimeout(function() { 
     $('.change-image').fadeOut() 
    }, 5000); 
}); 

Answer 2

var ImageProfileTimer; 

$('.image-profile').on('mouseenter',function(){ 
    clearTimeout(ImageProfileTimer); 
    $('.change-image').stop().show(); 
}).on('mouseleave',function(){ 
    ImageProfileTimer = setTimeout(function(){ 
     $('.change-image').fadeOut() 
    }, 5000); 
}); 

사용의 setTimeout 및 사항 clearTimeout

데모 : http://jsfiddle.net/xMNTB/9/

Answer 3

http://jsfiddle.net/xMNTB/7/

이제 마우스에서 div 표시가 나타나고 마우스를 끈 후 5 초 후에 사라집니다.

$(function() { 

    $('.image-profile').mouseenter(function() { 
     $('.change-image').stop().show(); 
    }); 

    $('.image-profile').mouseleave(function() { 
     setTimeout(function TimeOut() { 
      $('.change-image').fadeOut() 
     }, 5000); 
    }); 

}); 

Answer 4

이 시도 :

이미 사용

(function() { 
    $('.image-profile').mouseover(function() { 
     $('.change-image').stop().show(); 

     if ($('.image-profile').mouseout() == true) { 
      TimeOut(); 
     } 
    }).mouseout(function() { 
     setInterval(function TimeOut() { 
      $('.change-image').fadeOut() 
     }, 5000); 
    }); 
}); 

JSFIDDLE DEMO