jQuery背景动画
Posted
技术标签:
【中文标题】jQuery背景动画【英文标题】:Jquery background animate 【发布时间】:2011-06-09 17:25:03 【问题描述】:是否可以在 jQuery 中为 background-color
设置动画,因为它不起作用。
$('#something').animate(
background :"red"
, 1000);
【问题讨论】:
其实如何才能平滑的改变一个div的背景?? 如果你想对你的问题进行补充,你可以编辑它而不是评论它。只需点击问题左下角附近的edit
链接即可。
值得注意的是background
是定义background-color
、background-image
、background-position
、background-repeat
和background-attachment
的简写符号。您尝试制作动画的属性(在您的问题中已修复)是 background-color
(或者,在没有引号的 JS 中,backgroundColor
)。
【参考方案1】:
来自docs,
jQuery UI 项目扩展了
.animate()
方法,允许对一些非数字样式(例如颜色)进行动画处理。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。
因此,如果您使用 jQuery UI,您可以为背景颜色设置动画。只要确保您使用backgroundColor
而不是background
。
jQuery 的color animations plugin 也可以。
实时示例:http://jsfiddle.net/thai/NXejr/2/
【讨论】:
【参考方案2】:你需要一个插件来用 jQuery 做彩色动画:
http://plugins.jquery.com/project/color
【讨论】:
+1。这。根据the API docs: "非数字属性不能使用基本的 jQuery 功能进行动画处理。(例如,width
、height
或 left
可以进行动画处理,但 background-color
不能进行动画处理。 )"【参考方案3】:
试试这个:
$('#something').animate( backgroundColor: "#FF0000" , 1000, null, function ()
$('#something').css("backgroundColor", "#FF0000");
);
我在 animate 方面取得了不同程度的成功,但发现使用其内置回调和 jQuery 的 css 似乎适用于大多数情况。在 IE9、FF4、Chrome 中测试,使用 jQuery 1.5。
如需更完整的解决方案,请添加此插件:
$(document).ready(function ()
$.fn.animateHighlight = function (highlightColor, duration)
var highlightBg = highlightColor || "#FF0000";
var animateMs = duration || 1000;
var originalBg = this.css("background-color");
if (!originalBg || originalBg == highlightBg)
originalBg = "#FFFFFF"; // default to white
jQuery(this)
.css("backgroundColor", highlightBg)
.animate( backgroundColor: originalBg , animateMs, null, function ()
jQuery(this).css("backgroundColor", originalBg);
);
;
);
然后这样称呼它:
$('#something').animateHighlight();
【讨论】:
【参考方案4】:这是使用纯 jQuery 动画 RGB 颜色的简单代码(而不是使用 jQuery.Color 插件)
var start = [255, 0, 0], end=[255,255,255];
$('#element').animate('aaa': 1, step: function(now)
$(this).css('background-color', 'rgb('+
parseInt(start[0] + (end[0]-start[0]) * now) + ',' +
parseInt(start[1] + (end[1]-start[1]) * now) + ',' +
parseInt(start[2] + (end[2]-start[2]) * now) + ')'
)
, complete: function()$(this).css('aaa', 0))
【讨论】:
【参考方案5】:您可以使用 CSS3 过渡来实现相同的效果。你的动画可以通过
#something
-webkit-transition: background-color 1s linear;
transition: background-color 1s linear;
background: red;
此解决方案的唯一问题是 IE
【讨论】:
【参考方案6】:使用类似的语法(...background-color :"red"...
),我得到错误
SyntaxError: Unexpected token -
我能够通过将 CSS 属性 background-color
封装在单引号中来使其工作:
$('#something').animate(
'background-color' :"red"
, 1000);
【讨论】:
以上是关于jQuery背景动画的主要内容,如果未能解决你的问题,请参考以下文章