jquery timeout-function never called on mouseenter mouseleave
<p>I'm having a little problem with the setTimeout-function. </p>

<p><strong>$(this)</strong> is every DOM-Element with a specific class. </p>

<p>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. </p>

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

<p>Here's my code: </p>

<pre><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 = $('&lt;div style="display:none; left:' + parseInt(pos_left) + 'px; top:' + parseInt(pos_top) + 'px;" class="layouter_bar"&gt;&lt;ul&gt;&lt;li&gt;&lt;a class="edit" href="javascript:;"&gt;Edit&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="copy" href="javascript:;"&gt;Edit&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="remove" href="javascript:;"&gt;Edit&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;');

        //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") &amp;&amp; !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);
    }
},

};​
</code></pre>

<p>Any ideas?</p>

<p>thank you!</p>
