Disable mouseover event then re-enable

Question

How do I unbind or disable the mouse over after it's being hovered out then re-enable if the other box is faded out.

I tried the unbind, but seems that its not working, it just disables the whole thing.

I even tried a timeout but that is not working into my advantage.

Any help would be appreciated.

$("#shopping_basket").mouseover(function() { 
            // set a timeout so that this event will not trigger twice when mouseover from the bottom
            setTimeout(function() {
                /*$("#shopping_basket").unbind(mouseover);*/
                $("#miniBasketDetails").fadeIn(500);
            },500);
            });     
        $("#miniBasketDetails").mouseleave(function() { $("#miniBasketDetails").fadeOut(500); });

score 2 · Accepted Answer · answered Aug 06 '12 at 16:38

2

Just a guess try something like this:

$("#shopping_basket").bind('mouseover', function() {
  setTimeout(function() {
    $("#shopping_basket").unbind('mouseover');
    $("#miniBasketDetails").fadeIn(500);
  }, 500);

 //Re-enable as needed: $("#shopping_basket").bind('mouseover', function(){});
});

This code is not tested, but should work.

I think your problem was that you passed mouseover into .unbind() as a variable, not a string. This is why the "whole thing" was disabled, because JavaScript was looking for a variable named mouseover, which was not defined, and caused your code to break. Try it like this: .unbind('mouseover').

answered Aug 06 '12 at 16:38

Oliver Spryn

16,871
33
101
195

Excellent thank you very much for the explanation and help! This is what i was trying to do. – SmileyWar Aug 07 '12 at 09:14
@EmmanuelCorwinFlossie Could you please click the green check mark next to my answer to accept it, if you found it helpful. – Oliver Spryn Aug 07 '12 at 14:01
I would love to but my rep is to low :( – SmileyWar Aug 07 '12 at 17:43
@EmmanuelCorwinFlossie Your rep is too low to upvote, but you should be able to accept answers right off the bat: http://stackoverflow.com/privileges – Oliver Spryn Aug 07 '12 at 18:16
aha didnt know that, thanks spryno724 just done that, and learned something new again :) – SmileyWar Aug 08 '12 at 19:07
@EmmanuelCorwinFlossie Sorry to be so persistent, but you selected another person's answer. ;) – Oliver Spryn Aug 08 '12 at 19:11
Damn, i stackoverflow is pretty new to me, didnt, know you could like one answer per question, sorry for the hassle :) And thanks for your patience – SmileyWar Aug 08 '12 at 19:14
@EmmanuelCorwinFlossie No problem. Now you know. Thanks again! – Oliver Spryn Aug 08 '12 at 19:15

score 0 · Answer 2 · edited May 23 '17 at 12:33

Not sure if this is the algorythm you're looking for, it is based on answers shown in this question.
Here is the fiddle and the code:

$("#shopping_basket").hover(function() {
    $("#miniBasketDetails").fadeIn(500);
}, function() {
    $("#miniBasketDetails").data('is_over', false);
    setTimeout(function() {
        if (!$('#miniBasketDetails').data('is_over')) {
            //if not hovered over the #miniBasketDetails in 650 miliseconds after mouseleave
            $("#miniBasketDetails").fadeOut(500);
        }
    }, 650);
});

$("#miniBasketDetails").mouseenter(function() {
    $(this).data('is_over', true);
});

$('#miniBasketClose').click(function() {
    $("#miniBasketDetails").fadeOut(500, function() {
        $(this).data('is_over', false);
    });
});

The span#miniBasketClose is just one optional "Close button", not necessary for functionality of the code. Its functionality can be substituted (if needed) for example also with hovering over some other elements.

Hello there, thanks for the reply, with the previous answer i have actually established a close button, but thanks for the answer this is a great sollution. — SmileyWar, Aug 07 '12 at 09:16

Disable mouseover event then re-enable

2 Answers2