Fade e active

[Ocdigital 2]

Bom dia Pessoal estou com um problema ou quando coloco a função para fazer o fade do background do botão perco a função de deixar a classe como active.

 

<script type="text/javascript">
$(function() {
   $('.start').addClass('active');
       $('li a').click(function() {
       $('li a').removeClass('active');
       $(this).addClass('active');             
  });
});
</script>
<script type="text/javascript">
$(function(){  
$('li a').hover(function() {  
		$(this).stop().animate({ backgroundColor: "#46C9D0"}, 400);  
		},function() {  
		$(this).stop().animate({ backgroundColor: "#000" }, 400);  
		});  
});  
</script>

<nav id="main">
  <ul>
    	<li><a href="#inicio" class="" >sobre</a></li> 
       <li><a href="#trabalhos"  class="">portifólio</a></li>
       <li><a href="#contato" class="">contato</a></li>
     </ul>

   </nav><!--menu-->

[Júlio Santos 3]

Quando ele está com a class 'active' o que o difere dos outros é a cor? Porque se for a animação no hover() vai sobrepor mesmo. Neste caso você pode fazer uma verificação se o link em questão possui ou não a class 'active'. Se possuir você não faz a animação nele.

 

Ou o que você quer é outra coisa?

[Ocdigital 2]

O que difere é o a Font-size e o background-color