[英]JavaScript -Change CSS color for 5 seconds - How to add easing effect?
參考這個問題:
答案的工作演示:-
http://jsfiddle.net/maniator/dG2ks/
我需要知道如何為它添加緩動效果,以使顏色逐漸變得不透明,並且逐漸變得100%透明。
function makeRGBStr(obj) {
if (obj.a == null) return "rgb(" + obj.r + "," + obj.g + "," + obj.b + ")";
else return "rgba(" + obj.r + "," + obj.g + "," + obj.b + "," + obj.a + ")";
}
window["highlight"] = function(obj, color) {
var highlightColor = color || {
"r": 255,
"g": 0,
"b": 0
};
var orig = obj.style.backgroundColor;
var curAlpha = 1;
obj.style.backgroundColor = makeRGBStr(highlightColor);
setTimeout(function() {
curAlpha -= 0.1;
var newColor = highlightColor;
newColor.a = curAlpha;
obj.style.backgroundColor = makeRGBStr(newColor);
if (curAlpha <= 0) {
obj.style.backgroundColor = orig;
}
else {
setTimeout(arguments.callee, 100);
}
});
}
jsFiddle: http : //jsfiddle.net/dG2ks/32/
突出顯示是否存在特定的$ _GET變量:代碼: http : //jsfiddle.net/dG2ks/36/ ,實際使用它: http : //jsfiddle.net/dG2ks/36/show/?someVar=there
突出顯示表格單元格: http : //jsfiddle.net/dG2ks/38/
您可以添加與jquery ui組合的jquery庫(如果尚未使用的話),然后使用switchClass方法。
此處的所有信息: http : //jqueryui.com/demos/switchClass/
只需5行即可完成您想要的操作:
將jquery en jquery ui放置在頁面的頂部(兩行代碼)。 這些是遠程托管的文件,您可以按原樣復制/粘貼代碼。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
然后,在正文的最后放置一個包含以下三行代碼的腳本:
$(".yourbutton".click(function() {
switchClass('.currentclass','.redclass',500)
// transition from .currentclass to .redclass in 500 milliseconds
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.