Colour Animation in Javascipt

Question

I would like my text to fade from white to black and the background colour to change from black to white simultaneously any ideas?

Answer 1

In jQuery you can animate the colour of text by default using:

$('#element').animate({ color: 'red' }, 1500);

But background animations cannot be done by default and require a plugin (links below).

jQuery: http://www.jquery.com/
Colour plugin: http://plugins.jquery.com/project/color

Enjoi ^.^

Answer 2

This could be achieved easily with the jQuery color plugin:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="jquery.color.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#foo').animate({
            backgroundColor: '#fff',
            color: '#000'
        }, 'slow');
    });
    </script>

</head>
<body>
    <div id="foo" style="background-color: black;">Some Text</div>
</body>
</html>

See it in action here.