Fade com Jquery

[Meteora Design 0]

Galera, acho que minha duvida é simples, mas não consigo resolver. Tentem me ajudar, por favor?

 

Tenho uma div, essa div tem um background e um outro background para quando estiver com o mouseover. Isso no CSS. Gostaria de inserir um jquery para que, nessa transição de mouseover, ela seja feita em Fade.

 

O código está abaixo ...

 

Podem me ajudar? Valeeu em!

 

O CSS

#chamada1{
background:url(../img/chamada1.jpg);
background-repeat:repeat-x;
width:100%;
height:130px;
}
#chamada1:hover{
background:url(../img/chamada1.2.jpg);
background-repeat:repeat-x;
width:100%;
height:130px;
}

 

O HTML

<div id="chamada1">
   		<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor .</p>
   </div>

[Vinicius Rangel 208]

isso não é necessário cara, no mouseOver você altera as propriedades do css.

 

$('div').mouseover(function(){
  $(this).css('background', 'gray').fadeIn('slow');
});

[Meteora Design 0]

Como eu posso adaptar isso ao meu código. Pois da maneira que eu tentei colocar agora, ele continuou mudando sem fade. Eu quero uma transição suave, entende?

 

Valeu cara!!!

[Vinicius Rangel 208]

onde esta div no código você vai colocar a class ou o ID da div.

[Meteora Design 0]

Então, na verdade eu fiz isso, mas ele continuou fazendo a mudança "brusca", sem suavização. Poderia me dizer o que é?

[Dárcio Gomes 10]

se tratando de menus com efeitos jQuery você precisa declarar o ready do jquery para que não precise chamar alguma função para executar o mesmo...

 

exemplo:

<script type="text/javascript">
$(document).ready(function(){ // declaração do ready
$("#id_do_menu").hover(
function(){
	$(this).stop().animate({ opacity: 1.0 }, 1000); // o 1000 serve para controlar a velocidade do efeito
},function(){
	$(this).stop().animate({ opacity: 0 }, 1000);
});
});
</script>

 

fiz um tutorial no meu site de como fazer um menu animado com jQuery segue o link abaixo:

http://www.darcweb.com.br/VerPost/2/2-Criando_um_menu_animado_com_jQuery_e_css

 

 

espero que ajude... :thumbsup: