How to implement smooth highlighting in jQuery?

Question

JavaScript

there is a css class

.highlighted {
   background-color: rgb(0,0,0);
}

how to "smoothly" add this class to the button?
Or how to adequately implement a smooth button illumination?

change the color like this, it's not good, with fast hovering, the button starts to "blink", as many times as we hovered over it. try jsfiddle

$(".topMenu").on("mouseenter", "a", function() {
    $(this).animate({
      "background-color": "rgb(0,0,0)"
    });
  });
$(".topMenu").on("mouseleave", "a", function() {
    $(this).animate({
      "background-color": "rgb(200,200,200)"
    });
  });

Answer 1

Via the transition CSS property: jsfiddle.net/6Lxz9cb5/1

Answer 2

1. Create a class in styles

.slow{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-o-transition: all 1s ease;transition: all 1s ease;}
.slow:hover{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-o-transition: all 1s ease;transition: all 1s ease;}

2. Set this class to everything that should animate smoothly , for example:
3. Set animation. Either jquery or css. For example css on hover:
Animation will last 1 second anyway, with ease effect.
Implementation with hover and jquery, and with different speeds - molotov.pro