0

我早些时候发布了一个关于让一些 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 函数仅适用于带有 firebug 的 firefox；另外，悬停功能似乎不起作用

谢谢，

艾伦

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

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

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

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

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

谢谢大家的帮助。

4

2 回答 2

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);
    });
});
于 2012-04-22T04:10:25.923 回答
0

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

于 2012-04-22T04:26:15.790 回答