jQuery animating background color - not working_问答_开发者

jQuery animating background color - not working

开发者 https://www.devze.com 2022-12-22 18:04 出处：网络

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

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. Unfortunatel开发者_高级运维y, 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.

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.

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.