淡入/淡出RGBA背景颜色 - 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)

您也可以将其中一个easings应用于动画。