Henrik Baecklund Henrik Baecklund - 12 days ago 7
Javascript Question

Highlight area with backgroundcolor fadein/fadeout

Hi I'd like to highlight

.small
. Do not have access to add jQuery UI e.g. can't use
.animate
.

HTML

<span class="small">10 left</span>


jQuery

$(".small").css("background-color","orange");


Question: How do I add background-color orange and make it
.fadeOut()
here? This below doesn't work? Only want to fadeout the background color, nothing else.

$(".small").css("background-color","orange").fadeOut();

Answer

you can use CSS animations to do that

see snippet below

span {
  background-color:orange;
  animation-name:bckanim;
  animation-fill-mode:forwards;
  animation-duration:3s;
  animation-delay:0s;
}
@keyframes bckanim {
  0% {background-color:orange;}
  100% { background-color:transparent;}
}
<span class="small">10 left</span>