Animate CSS changes after fadeIn?

Question

I'm trying to animate a box's CSS after it has faded in after X seconds (to simulate new, and old) however it doesn't even animate as intended. I also tried .promise().done(function(){ animate({ ... }) }) after the fadeIn() on the end of the .click() but that didn't seem to do it either. Is there another way? I've seen it done. :O

JSFiddle

$('#button').click(function() {
    var box = $('#box');
    box.fadeIn('slow');
    var end = setInterval(function() {
        box.animate({
            backgroundColor: '#EFE9A8',
            borderColor: '#F7B64D',
            color: '#AD771F'
        }, 1200);
        clearInterval(end);
    }, 200);
});

Update:

It seems my animation doesn't work at all actually.

Answer 1

To have an animation (or any code for that matter) run after a fadeIn you can use the callback parameter:

$('#box').fadeIn('slow', function () {
    // code goes here
});

Unfortunately however, you are trying to animate colours and this is unsupported in basic jQuery. So to answer your question (how to queue an animation to run after a fadeIn), use the callback. But to answer your implied question (how to animate colours) you'll need to get the "Color" plugin for jQuery or use jQuery UI which does have support for animating colours.

More information on the animate() method here: https://api.jquery.com/animate/

Answer 2

You can include jQuery UI in order to make .animate() work with color animation.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Updated Fiddle

Answer 3

If you want to sequence an animation after the end of another, you could do something like this:

box.fadeIn('slow').delay(200).animate({
                backgroundColor: '#EFE9A8',
                borderColor: '#F7B64D',
                color: '#AD771F'
            }, 1200);

Your jsFiddle can not work because it doesn't have the color animation plugin. Anyway, even if I add jQuery UI (which now includes the color animation plugin), I can't make it work with jsfiddle. I think there's an issue with jQuery UI in jsFiddle.

Edit: Try it with jsbin: http://jsbin.com/xadiwuxo/1/edit?html,css,js,output

Edit2: in fact jsfiddle works if you use the correct jQuery UI version. I think you need at least jQuery UI 1.9.x. The jsFiddle above uses jQuery 1.x (edge) and therefore is limited to jQuery UI 1.8.9.

Answer 4

aminate in jquery does not work for BackGroundColor.. so you have to use another color plugin...

Or very neat and clean way is use the CSS3 transition property..

add the below css for Box --

#box
{
..
..
..

-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
transition:all 1s
}

and in jquery set the background color border or whatever u wnt

$('#button').click(function() {
    var box = $('#box');
    setTimeout(function(){
        box.css({
        backgroundColor: '#EFE9A8',
        borderColor: '#F7B64D',
        color: '#AD771F'
        });
    },1200);        
});

CHECK THE FIDDLE

Answer 5

Well silly me, I didn't know you needed a extension to handle some animation properties. Have a look at jQuery Color on the GitHub.

"jQuery Color has faithfully supported animating colors between two hex values since the beginning. Many developers asked for access to the internal functions we had declared to make it all possible. Version 2 now includes an API to create and modify colors, as well as support for RGBA & HSLA colors and animations." ~jQuery Blog

This plugin was my savior, and adds all the flexibility I need. Here is the revised version of the original code.

All I had to do was add the jQuery Color extension, and all was good to go.

<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>

It's best to store the script locally, and use the compressed version, this is for testing purposes on JSFiddle.