javascriptjquery

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();
Solution

  • 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>