jqueryUI懸停（幻燈片）重複一遍又一遍

我早些時候發佈了一個關於讓一些div變得可見並向上滑動像紙的問題，並且我得到我的JQuery代碼一致地工作（或根本）。jqueryUI懸停（幻燈片）重複一遍又一遍

我現在已經克服了這些問題，更多地進入了調整階段。

我有一系列看起來像文件夾分隔線的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使它看起來是從上到下。而且，速記根本不起作用。在懸停狀態下沒有任何變化。這與我在第一個發佈的問題中提到的問題類型相同。

然後我試着用恰當的語法和逗號，似乎工作（phew，發現了一個錯字之前，我完成了這篇文章/評論）。

有關爲什麼簡寫版本不起作用的任何想法？

我剛剛剪切並粘貼到我的文檔中，並將其原始註釋掉，但回覆爲零。

感謝您的幫助，每個人。

來源

2012-04-22 mrmacross

首先，不需要不斷地重複這個過程，將所有這些簡化爲一個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); 
    }); 
});

來源

2012-04-22 04:10:25 alt

哦，你已經張貼給他們寫一個函數裏面.. ！ – Peeyush 2012-04-22 04:27:35

對您有幫助嗎？ – alt 2012-04-22 05:52:05

是的，這對我增加自己的知識很有幫助..我投了你的答案。 – Peeyush 2012-04-22 06:08:02

看到這裏的懸停語法http://api.jquery.com/hover/需要兩個動作之間添加逗號（，）和它的更好，因爲在官方的文檔

來源

2012-04-22 04:26:15 Peeyush

jqueryUI懸停（幻燈片）重複一遍又一遍

回答

相關問題