jquery timeout-function never called on mouseenter mouseleave

I'm having a little problem with the setTimeout-function.

$(this) is every DOM-Element with a specific class.

When the mouse enters an elememt, and then leave it, there is no problem. But when the mouse leaves an element directly to another (within the 500ms timeout) the first element (that one, the mouse left from) never fades out.

So the new mouseenter-Event kind of prevent the timeOut to call the function.
Without the setTimeout-wrapper everything is just working fine.

Here's my code:

$(this).hover(methods['mouseenterManager'], methods['mouseleaveManager']);
 
 
 /**
  * manage mouseenter events
  */
 mouseenterManager: function() {
 
     clearTimeout(timer);
 
     //create toolbar, if no toolbar is in dom
     if ($(this).data("layouter").toolbar == undefined) {
 
         //get bottom center of this element
         pos_left = ($(this).width() / 2) + $(this).offset().left;
         pos_top = $(this).height() + $(this).offset().top;
 
         //create toolbar element
         toolbar = $('<div style="display:none; left:' + parseInt(pos_left) + 'px; top:' + parseInt(pos_top) + 'px;" class="layouter_bar"><ul><li><a class="edit" href="javascript:;">Edit</a></li><li><a class="copy" href="javascript:;">Edit</a></li><li><a class="remove" href="javascript:;">Edit</a></li></ul></div>');
 
         //bind this element to toolbar
         toolbar.data("layouter", {
             parent: $(this),
         });
 
         //bind toolbar to this element
         data = $(this).data("layouter");
         data.toolbar = toolbar;
         $(this).data("layouter", data);
 
         //bind this element to toolbar
         data = toolbar.data("layouter");
         data.parent = $(this);
         toolbar.data("layouter", data);
 
         element = $(this);
         toolbar.mouseleave(function() {
 
             toolbar = $(this);
             timer = setTimeout(function() {
                 if (!toolbar.is(":hover") && !element.is(":hover")) {
 
                     toolbar.fadeOut("fast", function() {
                         $(this).remove();
                     });
 
                     data = element.data("layouter");
                     data.toolbar = undefined;
                     element.data("layouter", data);
                 }
             }, 500);
         });
 
         //display the toolbar  
         $("body").append(toolbar);
         toolbar.fadeIn("fast");
     }
 },
 
 
 /**
  * manage mouseleave events
  */
 mouseleaveManager: function() {
 
     toolbar = $(this).data("layouter").toolbar;
     element = $(this);
     if (toolbar != undefined) {
         timer = setTimeout(function() {
             if (!toolbar.is(":hover")) {
 
                 toolbar.fadeOut("fast", function() {
                     $(this).remove();
                 });
 
                 data = element.data("layouter");
                 data.toolbar = undefined;
                 element.data("layouter", data);
             }
         }, 500);
     }
 },
 
 };?
 

Any ideas?

thank you!

---