Flash元素沒有jQueryUI的開銷？

我正在讀this question關於如何在jQuery中創建一個元素「flash」，但是，最流行的答案依賴於jQueryUI，如果我需要的只是backgroundColor進行動畫化，那麼這個答案非常大，可以包含在項目中。有沒有辦法在不使用jQueryUI的情況下以類似的方式刷新元素的背景顏色？Flash元素沒有jQueryUI的開銷？

來源

2011-10-21 Ivan

爲了完成這個「閃」你只需要用戶界面效果的核心和UI效果。由於這個原因，jQuery UI被設計爲可以使用，你不需要所有的小部件代碼，如果你不使用它們... – gnarf

您可以編寫一個函數，其中包含for循環，每個循環都有一些延遲。在循環的每個循環中，可以減少/增加顏色值並將其設置爲背景。這產生了與動畫相同的效果。

來源

2011-10-21 18:45:38

你需要使用setInterval（）或setTimeout（）來做延遲，以避免阻止用戶界面。 – JeffSahol

-2

經過對該頁面上的答案進行搜索後，我找到了一個指向jQuery workaround的鏈接，允許在jQuery元素上調用函數.highlight()。雖然需要jQuery，但jQueryUI不是。

來源

2011-10-21 18:49:08 Ivan

如果這回答你自己的問題，你仍然可以標記爲這樣。我也認爲jquery ui會繼續使用「effects.js」來完成這項工作。所以如果jQuery沒有做到這一點，你可能會看到效果。 – Eonasdan

像這樣的東西應該工作（我希望）。

function flash($element, times) { 
    var colors = ['#fff', '#000']; 
    $element.css('background-color', colors[times % colors.length]); 
    if (times === 0) return; 
    setTimeout(function() { 
    flash($element, times - 1); 
    }, 500); 
}

使用它像這樣的元素：flash($('#some_element'), 5)

來源

2011-10-21 18:50:01 Znarkus

方式一：

setInterval(function(){ 
    $('#hello').css('background-color', 'red'); 
}, 100); 

setInterval(function(){ 
    $('#hello').css('background-color', 'green'); 
}, 150);

DEMO

來源

2011-10-21 18:55:19 Sarfraz

不好的方法。這兩個時間間隔很容易與彼此不同步。最好使用一個使用布爾值或類似方法切換效果的應用程序。 – Clox

Flash元素沒有jQueryUI的開銷？

回答

相關問題