How to detect whether mouseout is true or not?

Question

I have this simple fiddle as a working example-

I am trying to detect mouseout event from a div section. When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.

I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.

How do i detect mouseout event in jQuery?

Tried-

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

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

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

        );
    });

you already use `mouseover`, why would `mouseout` work any different? — Yoshi, Aug 02 '13 at 11:17
+ I bet you don't want to use `setInterval()` for this. Try `setTimeout()` instead. — Teemu, Aug 02 '13 at 11:18
@Yoshi, Just because i want to detect mouseout event, Using it is an another way of doing it. — Manoz, Aug 02 '13 at 11:27
@Manoz I think that's a simple misunderstanding on your side. Due to the async nature, handling events always involes callback functions. You can maybe hide them or otherwise abstract them, but in the end a function will be called to handle the event. — Yoshi, Aug 02 '13 at 11:35
@Manoz There can't be a mouseout event fired for the same element, ever, at a time when handling `mouseover`. The mouse has just entered to an element, how it would be possible to detect a mouseout from that element at the same time? — Teemu, Aug 02 '13 at 11:55

l2aelba · Answer 1 · 2013-08-02T11:26:07.077

1

var ImageProfileTimer;

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

Use setTimeout and clearTimeout

Demo : http://jsfiddle.net/xMNTB/9/

edited Aug 02 '13 at 11:26

answered Aug 02 '13 at 11:20

l2aelba

21,591
22
102
138

Can it be done without using another function of mouseleave? I want to detect if mouseout is true. – Manoz Aug 02 '13 at 11:30
Yes, you can do it @Manoz just change mouseleave to mouseout – l2aelba Aug 02 '13 at 11:31
+ http://stackoverflow.com/questions/4258615/what-is-the-difference-between-jquerys-mouseout-and-mouseleave – l2aelba Aug 02 '13 at 11:33

score 0 · Answer 2 · answered Aug 02 '13 at 11:19

0

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

answered Aug 02 '13 at 11:19

Virus721

8,061
12
67
123

score 0 · Answer 3 · answered Aug 02 '13 at 11:21

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

Now the div show up on mouse enter and disappears 5 seconds after mouse leave.

$(function () {

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

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

});

score 0 · Answer 4 · answered Aug 02 '13 at 11:24

Try This:

(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

How to detect whether mouseout is true or not?

4 Answers4