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.

this might help you, check it out http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — reuelab, Apr 16 '14 at 05:34
@Rjonacci LOL! I _just_ found the same articles! Posting revisions! — WASasquatch, Apr 16 '14 at 05:37

vdavid · Answer 1 · 2014-04-16T05:43:23.720

1

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.

edited Apr 16 '14 at 05:43

answered Apr 16 '14 at 05:35

vdavid

2,434
1
14
15

Thanks, I found all this out with a refined search. See my answer. – WASasquatch Apr 16 '14 at 05:43
Good to know. Please try using `delay` instead of `setInterval`. It's clearer and you can interrupt the effect directly through jQuery calls in case you have a long animation and want to transition directly. setInterval would just screw up this kind of things. – vdavid Apr 16 '14 at 05:47

score 1 · Answer 2 · answered Apr 16 '14 at 05:38

1

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

answered Apr 16 '14 at 05:38

Felix

37,892
8
43
55

Thanks, I found all this out haha. See my answer. – WASasquatch Apr 16 '14 at 05:42

score 1 · Accepted Answer · answered Apr 16 '14 at 05:44

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/

Oh, that's right, you can do a callback. Silly me. I did figure it out minutes later haha see my answer below. — WASasquatch, Apr 16 '14 at 05:47

score 1 · Answer 4 · answered Apr 16 '14 at 05:45

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

Thanks, I figured it out minutes later, see my answer below. Haha. — WASasquatch, Apr 16 '14 at 05:46

score 0 · Answer 5 · answered Apr 16 '14 at 05:41

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.

Animate CSS changes after fadeIn?

JSFiddle

Update:

5 Answers5