代码之家 › 专栏 › 技术社区 › Christian

为什么jquery hover animate在本例中不起作用?

jquery

Christian · 技术社区 · 14 年前

当我将鼠标悬停在盒子上时,它不会根据我的意图改变它的主叫方。发生了什么?

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

2 回复 | 直到 14 年前

Nick Craver 14 年前

你的代码有效, you can see here for a demo .

你需要 jQuery color plugin 对于 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会导致各种不可预测的行为,尤其是跨浏览器的行为:)

Amy B 14 年前

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>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前