Question

当我将鼠标悬停在方框上时，它不会像我的意图那样改变它的来电者。怎么了？

<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>

Answer 1

您的代码有效，you can see here for a demo。

为此需要jQuery color plugin for jQuery UI（为大多数非数字属性设置动画），例如使用CDN中的UI（如果您有其他UI用途.. 。如果这个动画就是你所追求的，那么使用颜色插件，要小得多）：

<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>

另外</div>中还有<body>，请务必将其删除，无效的HTML会导致各种不可预测的行为，尤其是跨浏览器：）

Answer 2

jQuery不使用插件执行背景颜色动画：http://plugins.jquery.com/project/color

此外，您的HTML非常无效，因此可能仍会导致失败。

更有效：

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>

为什么JQuery不在此示例中悬停动画工作

2 个答案: