Плавное изменение цвета фона строки

//таймауты 
var timeouts = { 
  up_down: null 
} 
 
/* подниятие отдела */ 
$('#content').on('click', '.fa-arrow-up', function(e) { 
 
  e.preventDefault() 
  var $tr = $(this).closest('tr') // текущая строка 
  var $tbody = $(this).closest('tbody') 
  // если строка уже сверху - ничего не делаем 
  if ($tr.index() == 0) return 
 
  $tr.insertBefore($tr.prev()) // поднимаем текущую строку на уровень вверх 
 
  /* подсветка поднимающейся строки */ 
  $tbody.children().removeClass('info') // удаление у всех строк класса info 
  $tr.addClass('info') 
  clearTimeout(timeouts.up_down) 
  // подсветку нужно будет погасить, поэтому удаляем info у поднимающейся строки 
  timeouts.up_down = setTimeout(function() { 
    $tr.removeClass('info') 
  }, 1000) 
  /**/ 
 
  // если элемент стал первым блокируем arrow-up 
  if ($tr.index() == 0) { 
    var $fa_arrows_up = $('.fa-arrow-up') 
    $fa_arrows_up.removeClass('disactive-color') 
    $fa_arrows_up.eq(0).addClass('disactive-color') 
    return 
  } 
 
  // если элемент был последним(стал предпоследним) 
  // ставим последней arrow-down disactive-color 
  if ($tr.index() === $tbody.children().length - 2) { 
    var $fa_arrows_down = $('.fa-arrow-down') 
    // последней arrow-down ставим disactive-color 
    $fa_arrows_down.eq($fa_arrows_down.length - 1).addClass('disactive-color') 
    // убираем класс disactive-color у предпоследней arrow-down 
    $fa_arrows_down.eq($fa_arrows_down.length - 2).removeClass('disactive-color') 
  } 
 
  // var send_data = { csrf_name: csrf_hash } 
 
  // $.post(base_url('up_department'), send_data, function(res) { 
  //  // pass 
  // }, 'json') 
  // .error(function(res) { 
  //  // pass 
  // }) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<tr> 
  <td>Финансово-экономический отдел</td> 
  <td> 
    <a href="#" class="fa fa-pencil redact-department"></a> 
    <a href="#" class="fa fa-arrow-up disactive-color"></a> 
    <a href="#" class="fa fa-arrow-down"></a> 
    <a href="#" class="fa fa-remove rm-department"></a> 
  </td> 
</tr> 
 
 
<tr> 
  <td>Технический отдел</td> 
  <td> 
    <a href="#" class="fa fa-pencil redact-department"></a> 
    <a href="#" class="fa fa-arrow-up"></a> 
    <a href="#" class="fa fa-arrow-down disactive-color"></a> 
    <a href="#" class="fa fa-remove rm-department"></a> 
  </td> 
</tr>