CODEWITHSUNDEEP
jquery
Christian
Christian

Reputation: 26437

Why doesn't JQuery hover animate work in this example

When I hover over the box it doesn't change it's caller as I intent. What's wrong?

<html>
<head><title>test</title></head>
<style type="text/css" >
.box_type1{
    width:560px;
    height:560px;

    background-color:#b0c4de;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$('.box_type1').hover(
    function () {
        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
    });

    });
</script>
<body>

</div>

    <div class="box_type1">
    </div>
</body>
</html>

Upvotes: 0

Views: 573

Answers (2)

Nick Craver
Nick Craver

Reputation: 630627

Your code works, you can see here for a demo.

You'll need either the jQuery color plugin for jQuery UI for this though (to animate most non-numeric properties), for example using UI from the CDN (if you have other uses for UI...use the color plugin if this animation is all you're after, much smaller):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Also there's an extra </div> in your <body>, make sure to remove it, invalid HTML causes all sorts of unpredictable behavior, especially cross-browser :)

Upvotes: 2

Amy B
Amy B

Reputation: 17977

jQuery doesn't do background color animations with a plugin: http://plugins.jquery.com/project/color

Also, your HTML is quite invalid so that might still cause a failure.

More valid:

DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <style type="text/css" >
        .box_type1{
            width:560px;
            height:560px;
            background-color:#b0c4de;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $('.box_type1').hover(
            function () {
                $(this).animate({backgroundColor: '#4E1402'}, 300);
                }, function () {
                $(this).animate({backgroundColor:'#943D20'}, 100);
            });

            });
    </script>
    </head>
    <body>
        <div class="box_type1">
        </div>
    </body>
</html>

Upvotes: 1

Related Questions