jqueryUI悬停（幻灯片）一遍又一遍地重复答案

【问题标题】：jqueryUI hover(slide) repeating over and overjqueryUI悬停（幻灯片）一遍又一遍地重复
【发布时间】：2012-05-03 03:22:42
【问题描述】：

我之前发布了一个关于让一些 div 变得可见并像纸片一样向上滑动的问题，但我在让我的 JQuery 代码始终如一地工作（或根本不工作）时遇到了问题。

我现在已经克服了这些问题，进入了调整阶段。

我有一系列看起来像文件夹分隔符的 div。当悬停在每个单独的 div 上时，我想要一个单独的 div 像一张纸一样滑出。我在 JQueryUI 中使用了“幻灯片”功能来实现这种效果。在我的第一个版本中，我只有一张幻灯片，我发现即使将光标移开后，新的 div 仍然可见。然后我使用“隐藏”（首先是“显示”）添加了“幻灯片”功能的重复，以使工作表再次消失。这是我的代码：

    $("#artwork").hover(function () {
    $("#artwork-sheet").show("slide", { direction: "down" }, 1000);
    $("#artwork-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#websites").hover(function () {
    $("#websites-sheet").show("slide", { direction: "down" }, 1000);
    $("#websites-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#threedmodels").hover(function () {
    $("#threedmodels-sheet").show("slide", { direction: "down" }, 1000);
    $("#threedmodels-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#games").hover(function () {
    $("#games-sheet").show("slide", { direction: "down" }, 1000);
    $("#games-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#movies").hover(function () {
    $("#movies-sheet").show("slide", { direction: "down" }, 1000);
    $("#movies-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#flash").hover(function () {
    $("#flash-sheet").show("slide", { direction: "down" }, 1000);
    $("#flash-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#info").hover(function () {
    $("#info-sheet").show("slide", { direction: "down" }, 1000);
    $("#info-sheet").hide("slide", { direction: "down" }, 1000);
});

初始行为是正确的；但是，无论我的光标是在 div 上还是继续移动（激活后），工作表似乎都会随机出现和消失很多次。

我的猜测是，有一种更好的方法可以让 div 在悬停事件之后隐藏起来。有人可以提供帮助或指出正确的方向吗？

如果您想了解更多，这里是原始问题： jquery slideUp/Down functions only work in firefox with firebug; also, hover function doesn't seem to work

谢谢，

艾伦

“评论”块内没有足够的空间来提供有用的回复。

（回复#1）抱歉，这对我不起作用。 slideDown 正是我不想要的——我希望元素看起来是从下往上暴露的，而 slideDown 让它看起来是从上到下的。此外，速记根本不起作用。在悬停状态期间没有任何变化。这与我在第一个发布的问题中所述的问题类型相同。

然后我尝试使用带有逗号的“正确”语法，这似乎有效（唷，在我完成这篇文章/评论之前发现了一个错字）。

关于为什么速记版本不起作用的任何想法？

我刚刚剪切并粘贴到我的文档中并注释掉了原件，但响应为零。

谢谢大家的帮助。

【问题讨论】：

标签： jquery jquery-ui slider slide

【解决方案1】：

首先，不需要一遍又一遍地不断重复，将所有这些简化为一个 jQuery 选择变量，然后添加“-sheet”。接下来，您将显示和隐藏在同一个函数中，使用 .hover 语法正确，两个函数用逗号分隔。也使用 .slideDown() 因为它是更干净的 jQuery。 :)

$(function(){
    var $hoverbuttons = $('#artwork, #websites, #threedmodels, #games, #movies, #flash, #info')
    $hoverbuttons.hover(function(){
        $(this + '-sheet').slideDown(1000);
    },function(){
        $(this + '-sheet').slideDown(1000);
    });
});

【讨论】：

是的，这对我增加知识很有帮助..我投票赞成你的答案。

【解决方案2】：

在此处查看悬停语法http://api.jquery.com/hover/ 您需要在两个操作之间添加逗号 (,)，最好将它们写在官方文档中给出的函数中

【讨论】：