jQuery animating background color - does not work

advertisements

Anyone see what's wrong with my code? I just can't figure it out!!

The file paths are correct, and if i look in the console when i hover the h3 element, it outputs the text in "hover" just as it should.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS box</title>
    <link href="style.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/" src="jquery.color.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box h3').mouseover(function() {
                console.log('hover');
                $('#box h3').stop(true, true).animate({
                    backgroundColor: '#E4A333'
                }, 200);
            });
        });
    </script>
</head>
<body>

<div id="box">
    <h3><a href="#">Lorem ipsum dolor sit amet.</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing consectetur lectus, sed mollis ante dictum id. Nunc magna neque, ornare ac interdum at, pharetra vel leo. Morbi placerat, orci ut sollicitudin dictum, nisi eros feugiat tortor, ac ultricies est leo ac est. Suspendisse justo urna, porttitor eget adipiscing dictum, malesuada nec diam.</p>
</div>

</body>
</html>

It's suppose to change background color. Unfortunately, it's not working :(

Live link here: (removed) (will remove in a few hours most likely)


Your script tag for the color plugin is misformed:

<script type="text/" src="jquery.color.js"></script>

Should be:

<script type="text/javascript" src="jquery.color.js"></script>

Currently it's as if the jQuery.color plugin doesn't exist since it's not being included in the page.