JQuery setTimeout - 更有效的方法來做到這一點？

所以我只是切換和以小間隔去除一些類 - 我是相當新的JS和JQuery，但我已經做到了這一點，它的工作原理：JQuery setTimeout - 更有效的方法來做到這一點？

function priceTable() { 
    setTimeout(function(){$("#price-table-1").toggleClass("price-table-highlight"); },1000); 
    setTimeout(function(){$("#price-table-1").removeClass("price-table-highlight"); },2000); 
    setTimeout(function(){$("#price-table-2").toggleClass("price-table-highlight"); },2000); 
    setTimeout(function(){$("#price-table-2").removeClass("price-table-highlight"); },3000); 
    setTimeout(function(){$("#price-table-3").toggleClass("price-table-highlight"); },3000); 
    setTimeout(function(){$("#price-table-3").removeClass("price-table-highlight"); },4000); 
}

然而，似乎是一個可怕的很多重複 - 有沒有更好的方法來做到這一點？

來源

2012-11-21 user319940

您試圖完全達到什麼效果？ – mattytommo

這有點奇怪的解釋，但一個簡單的方法是說，三個相同的盒子（不同的ID）有一個黑色邊框，1秒鐘後第一個盒子變成藍色，然後再回來 - 第二個和第二個第三 - 如果這是有道理的？ – user319940

對於初學者來說，你可以將jQuery元素存儲到一些變量中，而不是爲同一元素兩次調用jQuery函數 –

對於jQuery動畫方法，使用delay方法工作正常。對於其他jQuery方法，我可能會推薦jquery.wait，它的作用與delay類似，但對於所有jQuery方法。您的代碼將變爲

function priceTable() { 
    $('#price-table-1').wait(1000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight'); 
    $('#price-table-2').wait(2000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight'); 
    $('#price-table-2').wait(3000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight'); 
}

來源

2012-11-22 05:09:19 madlee

謝謝 - 這看起來像一個不錯的解決方案。一旦我嘗試過，我會接受答案。 – user319940

只是意識到這意味着另一個HTTP請求，理想情況下我會避免。 – user319940

我的建議是使用構建腳本來自動連接並縮小您的產品代碼，或者只是將插件複製到主腳本中。 – madlee

您可以使用簡單的迭代來幹你的ID標識符。

timer = 1000; 
for(pricetableindex = 1; pricetableindex <=3; pricetableindex++){ 
    .....unction(){$("#price-table-"+pricetableindex).toggle... ), timer); 
    .....unction(){$("#price-table-"+pricetableindex).remove... ), timer+=1000);

這是訪問對象成員的重複語法，點語法以及數組表示法的主要賣點。

obj.member1 syntax does not allow this kind of manipulation, while 
obj["member1"] does.

來源

2012-11-21 21:13:10

function priceTable() { 
    var table_count = 3; 

    for(var i = 0; i < table_count; i++) { 
     // jQuery 
     $('#price-table-' + i).delay(1000) 
           .animate({ "background-color": "blue" }) 
           .delay(1000) 
           .animate({ "background-color": "black" }); 

     // jQuery UI (http://api.jqueryui.com/addClass/) 
     $('#price-table-' + i).delay(1000) 
           .addClass("price-table-highlight", 0) // 0 is important 
           .delay(1000) 
           .removeClass("price-table-highlight"); 

    } 
}

來源

2012-11-21 21:13:47 Selosindis

這看起來像一個很好的解決方案，但由於某種原因不起作用 - 我沒有得到任何JS錯誤，但類不切換。 – user319940

嘗試此更新的解決方案。我忘了.toggleClass（）調用不會添加到fx隊列中，所以不會等待.delay（）。使用.animate（）和jQuery將會產生所需的效果，或者增強。jQuery UI中的addClass（），它支持持續時間，並因此支持fx隊列（因此第二個參數0將UI版本與核心版本區分開來）。我希望這有幫助！ – Selosindis

如果你有藍色/黑色交換沒有限制，我會用jQuerys pulsate（DOC可以發現here）效果：

function priceTable() { 
    $("#price-table-1").effect("pulsate", { times:3 }, 2000); 
    $("#price-table-2").effect("pulsate", { times:3 }, 2000); 
    $("#price-table-3").effect("pulsate", { times:3 }, 2000); 
}

的這個唯一的缺點：它脈動整個元素。所以我建議不要像上面那樣使用上面的內容（因爲＃價格表中的所有文本都會淡入和淡出）。
脈動所做的是脈動它所應用的元素的不透明度。因此，例如，您可以使用空白div和適當的背景顏色來覆蓋您的價格表。

來源

2012-11-21 21:26:47

我實際上使用CSS3過渡來改變盒子陰影 - 看起來有點更容易用邊界解釋。 – user319940

您可以查看jQuery的animate和delay函數的組合以實現您的結果。

jQuery UI plug-in（你可能已經在使用？toggleClass是他們的方法之一，但我收集它存在於jQuery核心中，並在jQuery-UI中擴展）也可以爲整個類生成動畫。這將是這樣的：

function priceTable() { 
    $("#price-table-1").toggleClass("price-table-highlight",1).delay(1000).toggleClass("price-table-highlight", 1); 
}

沒有嚴格的「更有效」，因爲它需要整個額外的庫，但肯定更少的代碼。我不知道您是否可以通過撥打.delay來啓動動畫隊列，或者您是否需要設置超時功能，以便在price-table-2和3 id元素上開始動畫。

來源

2012-11-21 21:33:01

似乎有點瘋狂添加另一個庫 - 我實際上使用CSS3過渡來改變盒子陰影 - 似乎有點容易解釋與邊界。 – user319940

@ user319940啊，我不太瞭解CSS3轉換的速度，但我的理解是，它們主要是用來替換JS類型的動畫。如果您對它只適用於現代瀏覽器感到滿意，那麼我鼓勵您堅持使用CSS3實現。 –

我仍然使用JS來觸發CSS3，但其他一些建議似乎很不錯:)。 – user319940

JQuery setTimeout - 更有效的方法來做到這一點？

回答

相關問題