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

Answer 1

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').