JQuery .slideUp() after time OR mouseleave

Question

I got an element that is slided down by JQuery using .slideDown() method

$('#dropdown_shopping_cart').slideDown(800);

Now i want it to slide up after 6 seconds, but only if there is no hover on the element, if there is an hover, it should not .slideUp().

So far i worked with a timeout that added display:none to the element while i was giving the element´s hover display:block!important; in CSS so it would not get display: none until the hover is over.

JS    
setTimeout(function () { 
        $('#dropdown_shopping_cart').css('display', 'none');
    }, 6000);

_______________________________________________________
CSS
    #dropdown_shopping_cart:hover {
        display: block!important;
    }

Now i want to add the .slideUp() to this.

Just check to see if the [mouse is still over the element](http://stackoverflow.com/questions/18320190/without-jquery-i-need-to-find-out-if-the-mouse-is-over-an-element-not-determine), and if it is, do not trigger the `slideUp` — Sterling Archer, Sep 25 '15 at 14:02

kakajan · Answer 1 · 2015-09-25T14:54:39.043

Check this:

var myVar;
myVar = setTimeout(function() {
    $('#dropdown_shopping_cart').slideUp(800)
}, 6000);


$("#dropdown_shopping_cart").hover(
    function() {
        clearTimeout(myVar);
    },

    function() {
        myVar = setTimeout(function() {
            $('#dropdown_shopping_cart').slideUp(800)
        }, 6000);
    }
);

By default shopping cart will slideUp() after 6 seconds, if mouse hover action occured, setTimeOut will be cleared, after mouse leave the shopping cart, setTimeOut will setted automatically

Luca · Answer 2 · 2015-09-25T14:34:36.993

1

Id suggest you work with mouseover and a class:

$('#dropdown_shopping_cart').hover(function(){
    if(!$('#dropdown_shopping_cart').hasClass('active'))
    {
        $(this).addClass('active');
    } 
    else 
    {
        $(this).removeClass('active');
    }
}, 
function() {
    var myVar = setTimeout(function() {
        if(!$('#dropdown_shopping_cart').hasClass('active'))
        {
            $('#dropdown_shopping_cart').slideUp()
        }
    }, 6000);
})

And than in your setTimeout Function you add:

edited Sep 25 '15 at 14:34

answered Sep 25 '15 at 14:01

Luca

1,766
3
27
38

`setTimeOut` will run once, if user hover after 6 seconds, and then leave the cart, `setTimeOut` will not run, `setTimeOut` must be initialized on each mouse leave – kakajan Sep 25 '15 at 14:12
thanks, code got a bit obfuscated not, but this should solve the issue – Luca Sep 25 '15 at 14:17

Alvaro Flaño Larrondo · Accepted Answer · 2015-09-25T14:36:29.557

1

You can clear the timeout on mouseenter and reset it on mouseleave like this:

var hide_div_to;

function hideDiv(){
    hide_div_to = setTimeout(function () { 
        $('#dropdown_shopping_cart').slideUp(800);
    }, 6000);
}

$('#dropdown_shopping_cart').slideDown(800,hideDiv());

$('#dropdown_shopping_cart').mouseenter(function(){
     clearTimeout(hide_div_to);
});

$('#dropdown_shopping_cart').mouseleave(function(){
     hideDiv();
});

Here is a working JSFiddle

UPDATE

If you don't wan't to wait the timeout again when you leave, after the timeout is reached, you can do this:

$('#dropdown_shopping_cart').slideDown(800);

setTimeout(function () { 
    if(!$('#dropdown_shopping_cart').is(':hover')){
        $('#dropdown_shopping_cart').slideUp(800);
    }
    else{
        $('#dropdown_shopping_cart').mouseleave(function(){
            $('#dropdown_shopping_cart').slideUp(800);
        });
    }
}, 3000);

And here is a JSFiddle and here is another one that shows how this can be triggered multiple times.

edited Sep 25 '15 at 14:36

answered Sep 25 '15 at 14:06

Alvaro Flaño Larrondo

5,516
2
27
46

I will update my answer with a working solution for this. – Alvaro Flaño Larrondo Sep 25 '15 at 14:13
@MarcelW, i wrote same solution before Alvaro, not accepted mine :( – kakajan Sep 25 '15 at 14:16
@kakajan @MarcelW , that's true. If you don't need to hide the shopping_cart inmediatly on mouseleave after the timeout @kakajan's answer should be the accepted one: he wrote it first and he used the `hover()` which I think is a more clever way to do it. – Alvaro Flaño Larrondo Sep 25 '15 at 14:21

Luca Filosofi · Answer 4 · 2015-09-25T15:02:28.887

0

demo: http://jsfiddle.net/yo5gnvy3/7/

 $('#dropdown_shopping_cart').hide().slideDown(800, function () {
     var events = $._data($(this)[0], "events") || {};
     if (events.mouseover === undefined) {
         $(this).delay(1000).slideUp()
     }
 });

edited Sep 25 '15 at 15:02

answered Sep 25 '15 at 14:15

Luca Filosofi

30,905
9
70
77

This looked like something worth to try, but when I tried it in a JSFiddle it keeps saying `Cannot read property 'mouseover' of undefined` – Alvaro Flaño Larrondo Sep 25 '15 at 14:18
@ Alvaro Flaño Larrondo: sorry, for the delay but i have found a better way. look the demo and let me know. – Luca Filosofi Sep 25 '15 at 14:43
This doesn't look like what the SO was asking, or at least the alerts messages confused me a lot. I think I prefer my own answer. – Alvaro Flaño Larrondo Sep 25 '15 at 14:57
Alvaro Flaño Larrondo : i was trying to make a demo that show both element with hover applied and element without hover. it is simple: if the element has no hover event attached it slideUp otherwise it stay. also i have cleaned up the OS code by putting hide() and slideDown() in chain and making the check only when the slideDown is finished. more clean and elegant IMHO. – Luca Filosofi Sep 25 '15 at 15:09

JQuery .slideUp() after time OR mouseleave

4 Answers4