How to do the color animation like stackoverflow

Question

Here is one link which play the color animation

Even i need some kind of fade-in and fade-out color animation with jQuery. I want when user click a button then my div will fade similar like stackoverflow.

I tried this way but i guess my effect is close to stackoverflow but not same. here is my code which i tried with CSS

$(window).bind( 'hashchange', function( event ){
        var hash = '#'+event.fragment;
        var originalcolor = $(hash).css('background-color');
        $(hash).css('background-color', 'yellow');
        setTimeout(function () {
          $(hash).css('background-color', originalcolor);
        }, 1500);

  });

All you need is `transition: background-color 500ms;` on whatever your `hash` element is, and this should work. — somethinghere, Jun 10 '15 at 08:27
It depends on what you mean by "old browsers". Here's the table of compatibility http://caniuse.com/#feat=css-transitions — Nicolas, Jun 10 '15 at 08:46

score 1 · Accepted Answer · answered Jun 10 '15 at 08:52

1

You can use jquery.animate():

var $myElement = $('#myElement');
$myElement.animate({'background-color': '#F4AC01'}, 1000, function () {
    $myElement.animate({'background-color': '#fff'}, 1000, function () {
        console.log('Animation finish!')
    })
});

answered Jun 10 '15 at 08:52

kizisoft

386
2
12

1

`jQuery.animate()` is not able to animate background color (without additional plugins at least). – René Roth Jun 10 '15 at 08:57
here is my jsfiddle link http://jsfiddle.net/tridip/6k3rnaa1/ which i create with ur code. plzz have a look and tell me is it similar like stackoverflow. change if anything need to modify. – Mou Jun 10 '15 at 09:02
I never seen the code of stackoverflow, but it works as it is in stackoverflow. – kizisoft Jun 10 '15 at 09:08
1

It works because OP included jQuery UI, vanilla jQuery does not offer color animation: *For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used* - right from the jQuery docs you linked to. – René Roth Jun 10 '15 at 09:58

How to do the color animation like stackoverflow

1 Answers1