jQuery的懸停/延遲/淡入div的

我偶然發現了這個jQuery的片段：jQuery的懸停/延遲/淡入div的

$(".faded").each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
});

看到它在行動：http://jsfiddle.net/RExZs/

反正我試圖把它變成一個懸停功能，所以當你將鼠標懸停在導航菜單按鈕上，div就會隨着這個很酷的延遲效果而淡入。然後當鼠標離開時，div應該消失。這是一個「STORE」按鈕（錨），所以這將用於顯示產品的列表，當他們把它懸停。

到目前爲止，所有我想出來的是：

$(".products").hover(function(){ // I added THIS line 
    $(".products-list").hide().each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
    }); 
}); // and of course, THIS line

的問題是，它開始顯示div的，只要在頁面加載，LOL。

現在，當我將鼠標懸停在「STORE」按鈕上時，效果是完美，但是當鼠標離開時它又重新開始，重新加載這些div。

要麼幫助我，要麼告訴我在哪裏我可以去克服我該死的jQuery癮。 :)

謝謝！

來源

2012-06-02 Stephen

你的非工作代碼的小提琴怎麼樣？ – Alnitak

對於鼠標輸入和鼠標輸出，您需要單獨的行爲。

您還需要在切換時停止任何現有的動畫，並使用額外的true參數告訴它清空動畫隊列並跳轉到當前動畫的結尾。

$(".products").hover(function() { 
    $(".products-list").stop(true).each(function(i) { 
     $(this).delay(i * 200).fadeIn(); 
    }); 
}, function() { 
    $(".products-list").stop(true, true).fadeOut(); 
});

用於演示

來源

2012-06-02 15:28:27 Alnitak

不幸的是'.fadeIn（）'會「記住」轉換中捕捉到的任何div的部分不透明度。隨着多個徘徊，你最終會失去他們。另外第二個參數是緩動或回調，爲什麼發送它'真'？ – Sinetheta

@Sinetheta我沒有看到我的小提琴，也許是因爲第二個'true'參數。 – Alnitak

在動畫完成之前，鼠標進出'.products'。 – Sinetheta

見http://jsfiddle.net/alnitak/tvCBq/這取決於你希望你的「鼠標移開」的效果是什麼。 jsFiddle

$(".products").hover(
function(){ 
    $(".products-list").each(function(i) { 
     $(this).delay(i * 400).fadeIn(); 
    }); 
}, 
function(){ 
    $(".products-list").stop(true).show().hide(); 
});

PS：你應該總是嘗試使用最新版本的jQuery。您將通過快速移入和移出.products來看到，您可以更改項目淡入的順序。但是，如果您使用jquery 1.7而不是1.4，它們將始終以正確的順序褪色。看起來jQuery已經改變了動畫在這段期間排隊的方式。 jQuery 1.7.2 fiddle

來源

2012-06-02 15:32:38 Sinetheta

是的，我剛剛注意到了一些東西。與這些問題是當你去點擊其中一個div，他們淡出。 – Stephen

當然，那是因爲我正在回答你問的問題。通過製作'.products'的'.product-list'項子項來稍微改變標記，並且你自己有一個導航菜單。我已經編輯了相應的小提琴。 – Sinetheta

jQuery的懸停/延遲/淡入div的

回答

相關問題