Question

我正在尝试做的是一个简单的工具栏，当我将鼠标悬停/鼠标移动到父级时显示/隐藏。这有点难以解释，所以我在这里做了一个问题的样本：

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

顶部的方框按照我想要的方式工作。我使用.show（300）和.hide（300）我认为这是jQuery的常规方法。

在底部框中，我使用.show（“slide”）和.hide（“slide”），我认为这些方法是由UI扩展的。问题是，当我将鼠标移到“凹凸”上时，工具箱隐藏起来并像疯子一样显示。

顺便说一下！我正在使用UI 1.8.10和jQuery 1.5.1，（都来自MS CND）我也尝试了几个旧版本，结果是一样的。

任何想法为什么会这样？

谢谢！

埃德加。

Answer 1

这只是因为鼠标悬停被多次调用。您可以将您的电话打包到.show("slide")中的if (!$(this).find(".toolbar2").is(":visible")) {，这样它就只会运行一次。这将解决问题。可能会对隐藏进行反向检查。

或者，使用mouseenter代替mouseover。这只会运行一次，虽然我之前在IE6上看到了一些奇怪的行为。

Answer 2

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

我不知道为什么mouseOver被多次调用，但使用.hover（）时没有这个问题。

jQuery UI Show / Hide的行为与jQuery show / hide不同？也许是个bug？

2 个答案: