Question

I need to animate something on a web page with the ExtJS 3.4 library loaded. The specification is to animate an element’s color to red. As far as I can see from the Ext.Fx documentation this is not possible. Is there a workaround?

Alternatively, this chaining of effects:

info.fadeOut({ endOpacity: .25, duration: 2}).setStyle('color','#FF0000');

would be acceptable if the color change happened after the fadeOut ended, but there seems to be no way to specify a callback function.

Answer 1

Try animate method and color animation type:

info
    .animate(
        {
            opacity: { to: .25 }
        },
        0.5,
        null, 
        'easeOut',
        'run'
    )
    .animate(
        {
            color: { to: '#FF0000' }
        },
        0.5,
        null,
        'easeOut',
        'color'
    );

Working sample: http://jsfiddle.net/yRGUw/