1

With the reference to this question:-

JavaScript -Change CSS color for 5 seconds

Working demo of the answer:-

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

I need to know how i can add an easing effect to it, so that slowly and slowly color get 100% opaque and similarly get 100% transperent.

Community
  • 1
  • 1
Django Anonymous
  • 2,987
  • 16
  • 58
  • 106

2 Answers2

1

Code

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/

Some examples

ComFreek
  • 29,044
  • 18
  • 104
  • 156
  • And if i only want to do this with background then i thing i just simply need to change `obj.style.color` to `obj.style.background-color`... – Django Anonymous Mar 31 '12 at 10:43
  • But then the text will also get affected by `style.opacity`. I will make an example... – ComFreek Mar 31 '12 at 10:46
  • Also i want this to be done automatically without click lets say when page reloads or when a variable passed through $_GET method – Django Anonymous Mar 31 '12 at 10:47
  • 1
    Take a look: http://jsfiddle.net/dG2ks/32/. For the page reload, you could use `window.onload` and for $_GET you have to use `location.search`. – ComFreek Mar 31 '12 at 10:51
  • 1
    Another example with $_GET: http://jsfiddle.net/dG2ks/36/. You have to access http://jsfiddle.net/dG2ks/36/show/?someVar=9 in order to see it in action! – ComFreek Mar 31 '12 at 10:55
  • Hey can i do this thing for Table, as i have one `` whose background i have changed to `#FFF` in CSS, now is it possible to trigger this thing for `` – Django Anonymous Mar 31 '12 at 12:35
0

You can add the jquery library, combined with jquery ui - if you don't use it already - and use the switchClass method.

All info here : http://jqueryui.com/demos/switchClass/

It will only take 5 lines to do what you want :

Place jquery en jquery ui in the head section of your page (2 lines of code). These are the remotely hosted files, you can copy/paste the code 'as is'.

    <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>

And then, at the end of the body, place a script that contains these three lines of code :

    $(".yourbutton".click(function() {
            switchClass('.currentclass','.redclass',500) 
            // transition from .currentclass to .redclass in 500 milliseconds
    });
CAP
  • 317
  • 1
  • 6