Question

所以我只是试图让这个div在moused时慢慢改变颜色。我有这个：

<script type="text/javascript">
    $("#down").mouseover(function(){
        $("#down").animate({background: "#a34545"}, 5000)
    });
</script>

不应该那么复杂，虽然我认为我还必须添加一个mouseout功能。我测试了到目前为止我所拥有的，没有任何反应。它只是保持相同的颜色。我错过了什么？

这是HTML：

<!DOCTYPE html>
<html>
<head>
    <title>The Down-Champlain Regatta</title>
    <link rel="stylesheet" href="homepage.css"/>
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
    <div id="topcontainer">
        <img src="Images/Kim.jpg" id="tom">
        <img src="Images/Kim.jpg" id="zach">

        <div id="head">
            <p id="a">Hello South Burlington. We're the</p>
            <h5>Down Champlain Regatta.</h5>
            <p id="s">And we've got a bold new plan for sailing education on Lake Champlain.</p>
        </div>

        <div id="down">
            <p>check it out</p>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#down").mouseover(function(){
                $("#down").animate({backgroundColor: "#a34545"}, 5000)
            });
        });
    </script>
</body>
</html>

我认为可能是我的网络阻止访问jQuery库（学校计算机），所以我下载了库并在头部添加了链接。这对你们好吗？它还没有用......

Answer 1

您的代码完美无缺。

请参阅此FIDDLE DEMO

只需要包含jquery UI 1.8.5 这就是jquery的animate函数来自的地方。

请参阅Jquery Animate。

   Color Animation
Animate the properties of elements between colors.

另外： $("#down").animate({background : "#a34545"}, 5000);

应该是： $("#down").animate({backgroundColor : "#a34545"}, 5000);

Answer 2

你应该在$(document).ready：

中

<script type="text/javascript">
    $(document).ready(function(){
        $("#down").mouseover(function(){
            $("#down").animate({backgroundColor: "#a34545"}, 5000)
        });
    });
</script>

Answer 3

您可以使用此插件

http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js

$('#demodiv').animate({backgroundColor: '#400101'})

Div不改变颜色 - jQuery

3 个答案: