CODEWITHSUNDEEP
javascriptjquerysetinterval
Manoz
Manoz

Reputation: 6587

How to detect whether mouseout is true or not?

I have this simple fiddle as a working example-

Jsfiddle

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

        );
    });

Upvotes: 0

Views: 366

Answers (4)

l2aelba
l2aelba

Reputation: 22167

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/

Upvotes: 1

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

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

Upvotes: 0

Ferdinand Torggler
Ferdinand Torggler

Reputation: 1422

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);
    });

});

Upvotes: 0

Virus721
Virus721

Reputation: 8315

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

Upvotes: 0

Related Questions