CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

JQuery .slideUp() after time OR mouseleave

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.

Upvotes: 2

Views: 695

Answers (4)

Luca Filosofi
Luca Filosofi

Reputation: 31173

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

Upvotes: 0

kakajan
kakajan

Reputation: 2707

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

Upvotes: 4

Alvaro Flaño Larrondo
Alvaro Flaño Larrondo

Reputation: 5734

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.

Upvotes: 1

Luca
Luca

Reputation: 1826

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:

Upvotes: 1

Related Questions