jQuery UI Show/Hide behave different than jQuery show/hide? Maybe a bug?

What I’m trying to do, is a simple toolbar that shows/Hide when I mouseover/mouseleave over to parent. It’s a little bit hard and long to explain, so I did a sample of the problem 开发者_Python百科here:

http://jsfiddle.net/Ppr4N/44/

The box on the top works the way I want. I use .show(300) and .hide(300) I think this are the regular methods from jQuery.

On the bottom box, I use .show(“slide”) and .hide(“slide”), I think this methods are extended by the UI. The problem is that when I move the mouse over the “Bump”, the toolbox hides and shows like a maniac.

By the Way! I'm using UI 1.8.10 and jQuery 1.5.1, (both from MS CND) I also tried with a couple of old versions and the result is the same.

Any Idea why this is happening?

Thanks!

Edgar.

$(".container2")
        .unbind()
        .hover(
            function () {
                $(".toolbar2").show('slide',300);
            },
            function () {
                 $(".toolbar2").hide('slide',300);
            });

I don't know why mouseOver was being called multiple times, but it doesn't have this problem using .hover().

It's just because mouseover gets called multiple times. You can wrap your call to .show("slide") in if (!$(this).find(".toolbar2").is(":visible")) {, so that it will only ever run once. That will fix the problem. Probably do the inverse check on your hide.

Alternatively, use mouseenter instead of mouseover. That will only be run once, although I've seen some odd behaviour with this on IE6 previously.