JavaScript-更改CSS颜色5秒-如何添加轻松效果

JavaScript -Change CSS color for 5 seconds - How to add easing effect?

本文关键字：添加 何添加 CSS 更改 颜色 5秒 JavaScript-      更新时间：2023-09-26

参考此问题：-

JavaScript-更改CSS颜色5秒

答案的工作演示：-

http://jsfiddle.net/maniator/dG2ks/

我需要知道如何给它添加舒缓效果，这样慢慢地，颜色就会变得100%不透明，同样也会变得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/

  • 用不同的颜色突出显示所有表格单元格：http://jsfiddle.net/dG2ks/40/

您可以添加jquery库，并结合jquery ui（如果您还没有使用它的话），然后使用switchClass方法。

此处的所有信息：http://jqueryui.com/demos/switchClass/

只需5行即可完成您想要的操作：

将jquery en jquery ui放在页面的头部（2行代码）。这些是远程托管的文件，您可以按原样复制/粘贴代码。

    <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
    });
相关文章：