javascript - 淡入/淡出 RBGA 背景颜色 - Jquery 脚本

Question

是否可以通过 JS 脚本淡入 RGBA 背景颜色？我基本上想做一些几乎完全一样的事情-（http://codepen.io/thebabydino/pen/AtzpB），但我想通过函数淡入背景而不是悬停？

Answer 1

只需将其转换:hover为一个类：

.boo.hover {
  background-color: rgba(0,0,0,.5);
}

然后使用 jQuery 切换它：

$('.boo').click(function () {
  $(this).toggleClass('hover');
});

我分叉了你的例子：http ://codepen.io/anon/pen/dIJah 。单击图像进行切换。

Answer 2

是的。使用 jQuery animate是可能的。如果要通过脚本附加悬停事件：

$('#yourDivId').hover(function(){
$(this).animate({ "backgroundColor" : "rgba(1,2,3, .4)"}, 400);
}, function(){
$(this).animate({ "backgroundColor" : "rgba(4,3,2, .1)"}, 400)
});

如果您只想通过脚本制作动画，只需删除hover并替换$(this)为您要制作动画的元素。

$('#yourDivId').animate({ "backgroundColor" : "rgba(4,3,2, .1)"}, 400)

您还可以将其中一种缓动应用于动画。