Efeito no hover

[NetBoy16 72]

Fala pessoal, tudo bem ? eu to tentando fazer um menu interativo que o <a> possui display block, width, height e background com position bottom, quando passar o mouse faria uma transição, animação, efeito ou algo do tipo para o background position top, estou tentando com o animate() do jQuery mas só funfa no crhome e IE9, de que outra forma eu poderia fazer isso ?

 

Código do html:

        <table border="0" id="menuStart">
           <tr>
               <td><a href="?pag=Empresa" id="linkEmpresa"></a></td>
               <td class="divisor"></td>
               <td><a href="#" id="linkServicos"></a></td>
               <td class="divisor"></td>
               <td><a href="#" id="linkProdutos"></a></td>
           </tr>
           <tr>
               <td class="divisor"></td>
               <td><a href="#" id="linkClientes"></a></td>
               <td class="divisor"></td>
               <td><a href="#" id="linkContato"></a></td>
               <td class="divisor"></td>
           </tr>
       </table>

 

codigo do jquery

 

$(document).ready(function(){
   $("#linkEmpresa").hover(function(){
       $("#linkEmpresa").stop().animate({
           backgroundPositionY: "0px"
       }, 500 );
   }, function(){
       $("#linkEmpresa").stop().animate({
           backgroundPositionY: "-121px"
       }, 500 );
   }); 
});

[JCMais 75]

:seta: http://snook.ca/archives/javascript/jquery-bg-image-animations/

[NetBoy16 72]

:seta: http://snook.ca/archives/javascript/jquery-bg-image-animations/

 

Esse ai eu já tinha tentado mas não funfa :'(

[MafnGamer 13]

Você poderia usar CSS 3. :thumbsup:

[JCMais 75]

Esse ai eu já tinha tentado mas não funfa :'(

 

Tem certeza que testou de forma correta? Porque aqui funciona. :ermm:

[NetBoy16 72]

Tentei assim:

 

    
$(document).ready(function(){
$("#linkEmpresa")
.css( {backgroundPosition: "0 -121px"} )
.mouseover(function(){
	$(this).stop().animate(
		{backgroundPositionY: "0"}, 
		{duration:500})
	})
.mouseout(function(){
	$(this).stop().animate(
		{backgroundPositionY:"-121px"}, 
		{duration:500})
	})
});

 

Deu certo no IE 7, 8, 9 E Chrome e só no firefox que não, to ligado que é pq no FF n tem bgX, bgY, mas se eu faço só com backgroundPosition: "0 -121px" tb fica bugado, como se resolve no FF, alguém sabe ?

[JCMais 75]

Tenta assim:

    
$(document).ready(function(){
$("#linkEmpresa")
.css( {backgroundPosition: "(0 -121px)"} )
.mouseover(function(){
	$(this).stop().animate(
		{backgroundPosition: "(0 0)"}, 
		{duration:500})
	})
.mouseout(function(){
	$(this).stop().animate(
		{backgroundPosition:"(0 -121px)"}, 
		{duration:500})
	})
});