//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');
var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
d += 10;
(function(ii,dd){
setTimeout(function(){
$('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)');
}, dd);
})(i,d);
}
9条答案
按热度按时间1cklez4t1#
如果你想具体地动画元素的背景颜色,我相信你需要包括jQueryUI框架。然后您可以执行以下操作:
jQueryUI有一些内置的效果,可能对您也有用。
http://jqueryui.com/demos/effect/
vjrehmav2#
这个精确的功能(3秒发光来突出显示一条消息)在jQueryUI中作为突出显示效果实现
https://api.jqueryui.com/highlight-effect/
颜色和持续时间可变
2skhul333#
我知道问题是如何使用jQuery,但你可以用简单的CSS和一点jQuery实现同样的效果。..
例如,你有一个带有'box'类的div,添加以下CSS:
然后使用
AddClass
函数添加另一个具有不同背景颜色的类,如'box highlighted'或类似的东西,使用以下CSS:下面是一个codepen:https://codepen.io/anon/pen/baaLYB
zsohkypk4#
通常你可以使用.animate()方法来操作任意的CSS属性,但是对于背景颜色,你需要使用color plugin。一旦你包含了这个插件,你就可以像其他人指出的那样使用
$('div').animate({backgroundColor: '#f00'})
来改变颜色。正如其他人所写的,其中一些也可以使用jQueryUI库来完成。
gkn4icbw5#
仅使用jQuery(无UI库/插件)。即使是jQuery也很容易被淘汰
演示:http://jsfiddle.net/5NB3s/2/
v9tzhpje6#
根据浏览器的支持,你可以使用css动画。浏览器支持IE10及以上的CSS动画。这是很好的,所以你不必添加jquery UI依赖,如果它只是一个小的复活节彩蛋。如果它是你的网站不可或缺的一部分(也就是IE9及以下版本所需的),请使用jquery UI解决方案。
接下来创建一个jQuery click事件,将
your-animation
类添加到您希望动画的元素中,触发背景从一种颜色渐变到另一种颜色:jhdbpxl97#
我写了一个超级简单的jQuery插件来完成类似的事情。我想要的东西真的很轻的重量(它的732字节缩小),所以包括一个大插件或用户界面是不可能的我。它的边缘仍然有点粗糙,所以欢迎反馈。
你可以在这里检查插件:https://gist.github.com/4569265。
使用该插件,通过更改背景颜色创建高亮效果,然后添加
setTimeout
以启动插件以淡入到原始背景颜色,这将是一件简单的事情。bgibtngc8#
使用简单的javascript在2种颜色之间进行淡入淡出:
来源:http://www.pagecolumn.com/javascript/fade_text.htm
lf3rwulv9#
javascript fade to白色without jQuery or other library:
在印刷中,黄色是负蓝色,所以从第三个rgb元素(蓝色)开始,小于255开始,黄色高亮。然后,设置
var unBlue
值时的10+
使蓝色减号递增,直到达到255。