Question

我的JQuery：//script.js

$(document).ready(
function()
{
$(".image").bind('mouseenter', 
function()
{
    $(this).stop().animate(
    {
        backgroundColor: "blue"
    },
    {
        queue:false,
        duration:300,
        easing: "swing"
    });
});
$(".image").bind('mouseleave',
 function()
{
    $(this).stop().animate(
    {
         backgroundColor: "green"
    },
    {
        queue:false,
        duration:300,
        easing: "swing"
    });
});
});

HTML：//index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div class="image"></div>
</body>
</html>

CSS：//stylesheet.css

body
{
background-image: url("background.jpg");
margin:0 auto;
padding:0;
}
.image
{
background-color: green;
width: 100px;
height: 100px; 
}

div没有任何反应，但如果我用css（）尝试它就可以了！我怎样才能解决这个问题？一切都被正确调用，甚至是animate（）之后的一些东西（我添加了一个alert（）来检查lol）所以我不知道为什么......

Answer 1

来自官方jQuery文档：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本jQuery功能进行动画处理（例如，宽度，高度，或左边可以动画但背景颜色不能，除非使用了jQuery.Color（）插件）。属性值被视为a 除非另有说明，否则为像素数。单位em和％可以在适用的地方指定。

http://api.jquery.com/animate/

我建议使用CSS3过渡来达到同样的效果。 jsFiddle示例here。

.image {
    background-color: green;
    width: 100px;
    height: 100px; 
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

对于过渡宽松，您可以查看此link。

JQuery animate（）不适用于我的用法，而css（）工作正常

1 个答案: