Question

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

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

我有一系列看起来像文件夹分隔符的div。当鼠标悬停在每个div上时，我想要一个单独的div像一张纸一样滑出来。我在JQueryUI中使用了“slide”功能来实现这种效果。在我的第一个版本中，我只有一张幻灯片，我发现即使我将光标移开后，新的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使它看起来是从上到下。而且，速记根本不起作用。悬停状态期间没有任何变化。这与我在第一篇帖子中提到的问题类似。

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

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

我刚剪切并粘贴到我的文档中并注释掉了原文，但回复是零。

感谢大家的帮助。

Answer 1

首先，无需反复重复，将所有内容简化为一个jQuery选择变量，然后将“-sheet”添加到其中。接下来，你有你的节目并隐藏在同一个函数中，使用.hover语法correclty，让两个函数用逗号分隔。也可以使用.slideDown（），因为它更干净的jQuery。：）

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

Answer 2

在这里看到悬停语法http://api.jquery.com/hover/你需要在两个动作之间添加逗号（，），最好把它们写在官方文档中给出的函数中

jquery悬停（幻灯片）一遍又一遍地重复

2 个答案: