CODEWITHSUNDEEP
jquerypluginsjquery-animatebackground-color
qwerty
qwerty

Reputation: 5246

jQuery animating background color - not working

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)

Upvotes: 0

Views: 2711

Answers (3)

Calvin
Calvin

Reputation: 104

You have to have a background color already applied to the element before you try to animate on it. Try applying a background color to the element in your css or via your js just before your function call.

Upvotes: 0

ghoppe
ghoppe

Reputation: 21784

Hate to break it to you, but I copied your exact source code and changed your script links to link directly to your javascripts (ie. <script type="text/javascript" src="http://nike1.se/box/jquery-1.4.2.min.js"></script>), and it works as expected on my machine.

I suspect the problem is with your paths in the statements on your test page:

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

Your script is actually in the /box subdirectory. Perhaps the source links should be src="query-1.4.2.min.js" or src="/box/jquery-1.4.2.min.js". Or depending on your web server configuration you might need to include the full path like I did or use the BASE element to properly set the base directory of your document.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630389

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.

Upvotes: 1

Related Questions