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() 工作正常[重复]的主要内容,如果未能解决你的问题,请参考以下文章

Jquery animate 不适用于变换属性

jQuery中animate()方法用法实例

jQuery延迟不适用于mouseout

如何使用 jquery animate 滚动到元素跨浏览器

为啥 animate() 不适用于 data()?

Jquery animate() 和谷歌浏览器问题