CODEWITHSUNDEEP
javascriptphpjquery
Krishna Gupta
Krishna Gupta

Reputation: 685

Hide div after 15seconds of mouseout

On my website a pop-up is appeared on page load, i've three conditions :

  1. After page load if there is no any action on pop-up div within 15 seconds then it'll be hide automatically.
  2. After page load if mouse became out side the pop-up div then div will be hide after 15sec of mouseout.
  3. After page load if mouse is located on pop-up then pop-up will not be hide till mouseout.

code:

$(document).ready(function () {
    // Action on mouseover from pop-up
    $('#activity').on("mouseover", function(e) {
        ('#activity').show();
    });

    // Action on mouseout from pop-up
    $('#activity').on("mouseout", function() {
        setTimeout(function() { $("#activity").fadeOut(1500); }, 15000);
    });
setTimeout(function() { $("#activity").fadeOut(1500); }, 15000)
})

Upvotes: 2

Views: 618

Answers (3)

Sebastian Schneider
Sebastian Schneider

Reputation: 5532

Try this out:

$(document).ready(function () {
// Action on mouseover from pop-up
$('#activity').mouseover(function(e) {
    $('#activity').show();
});

// Action on mouseout from pop-up
$('#activity').mouseout(function() {
    setTimeout(function() { $("#activity").fadeOut(1500); }, 15000);
});

});

You let the actitvity fade out anyway because of your last line of code...

Upvotes: 0

Lynch
Lynch

Reputation: 910

Just using the .show() function won't stop the timeout function you've called. You need to clear the timeout function on mouseover.

This will set the timeout to a variable named timeout when the page has loaded, or reset it on mouseoff. If you mouseover the activity then that timeout function will be cleared (cancelled) and restarted when you mouseoff

$(document).ready(function () {

    var timeout;

    // Action on mouseover from pop-up
    $('#activity').on("mouseover", function(e) {
        clearTimeout(timeout);
    });

    // Action on mouseout from pop-up
    $('#activity').on("mouseout", function() {
        timeout = setTimeout(function() { $("#activity").fadeOut(1500); }, 15000);
    });

    timeout = setTimeout(function() { $("#activity").fadeOut(1500); }, 15000)
});

Upvotes: 8

Abhishek Sharma
Abhishek Sharma

Reputation: 6661

Try this code :-

$(document).ready(function () {
        // Action on mouseover from pop-up
        $('#activity').on("mouseover", function(e) {
            $('#activity').show();
        });

        // Action on mouseout from pop-up
        $('#activity').on("mouseout", function() {
            setTimeout(function() { $("#activity").fadeOut(1500); }, 15000);
        });
    setTimeout(function() { $("#activity").fadeOut(1500); }, 15000)
    })

or add $ in this line

$('#activity').show();

Upvotes: 1

Related Questions