如何在单击功能中使用动画更改元素的背景颜色？ [复制]
Posted
技术标签:
【中文标题】如何在单击功能中使用动画更改元素的背景颜色？ [复制]【英文标题】：How to change element's background-color with animation in click function? [duplicate] 【发布时间】：2014-03-09 11:10:32 【问题描述】：是否可以在点击功能中为背景颜色变化设置动画？我看到了许多带有鼠标悬停/悬停功能的示例，但没有一个带有单击功能的示例。只有没有动画以下线条作品：
$('#element').css( backgroundColor: "#99cc00" );
我尝试添加动画效果：
$('#element').animate( backgroundColor: '#ffffff' , 2000);
和
$('#element').css( backgroundColor: "#99cc00" ).animate(, 2500);
但没有效果。请看看我的小提琴： http://jsfiddle.net/dna6B/
有什么想法吗？
【问题讨论】：
【参考方案1】：在项目中包含JqueryUI。
$('#element').animate(backgroundColor:'#99cc00', 2500);
Demo
【讨论】：
谢谢！它当然需要 JqueryUI 库。而已！现在可以了！【参考方案2】：您可以使用 JQuery UI 来做到这一点。
$('#element').click(function ()
$(this).stop().animate(backgroundColor:'#99cc00', 2500);
);
更新您的JSFiddle 版本
【讨论】：
是啊thx，刚刚找到了一些sn-ps的代码，不知道需要UI库。【参考方案3】：要使用 jqueryUI 为背景颜色设置动画
假设你当前的#element 背景是#000000
然后这样做
$('#element').click(function()
$('#element').animate( backgroundColor: '#ffffff' , 2000);
);
将在 2 秒内将背景从黑色变为白色。
http://api.jqueryui.com/color-animation/
所以你需要在你的 head html 中包含这个，以及常规的 jquery
<head>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
【讨论】：
谢谢！它写在文档中：“注意：jQuery UI 项目扩展了 .animate() 方法，允许一些非数字样式（例如颜色）被动画化。”但我没看到。 掌心以上是关于如何在单击功能中使用动画更改元素的背景颜色？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章