JQuery animate() 不适用于我的用法，而 css() 工作正常[重复]
Posted
技术标签:
【中文标题】JQuery animate() 不适用于我的用法，而 css() 工作正常[重复]【英文标题】：JQuery animate() doesnt work with my usage while css() works fine [duplicate] 【发布时间】：2014-03-08 12:46:36 【问题描述】：我的 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() 来检查大声笑）所以我不知道为什么......
【问题讨论】：
在包含它们之后似乎也不起作用。 【参考方案1】：来自官方 jQuery 文档：
所有动画属性都应动画为单个数值， 除非如下所述；大多数非数字属性不能 使用基本 jQuery 功能（例如，宽度、高度、 或 left 可以设置动画但 background-color 不能是，除非 jQuery.Color() 插件被使用）。属性值被视为 除非另有说明，否则为像素数。单位 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() 工作正常[重复]的主要内容，如果未能解决你的问题，请参考以下文章