Primeiro vamos o jQyery:
Salve este link (clique com o botão direito, e depois em Salvar Como) em uma pasta qualquer do seu site.
Depois disso, inclua na Head do seu site, estes 2 códigos:
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
Esta código acima, inclui o arquivo que acabamos de baixar, em seu site. Note que a parte após o "src=" deve ser substituida pelo endereço onde você colocou o arquivo jQuery.js
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
|
Agora o código do estilo CSS:
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div> |
E este é o código que será inserido no HTML do seu site:
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div> |
Note que novamente os caminhos após o "src=" são as imagens 1 e 2 do seu computador. E class="a" e class="b" representam as classes do CSS que acabamos de postar.
O código sem separação de pastas, ficaria assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery Hover Effect</title> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript'> $(document).ready(function(){ $("img.a").hover( function() { $(this).stop().animate({"opacity": "0"}, "slow"); }, function() { $(this).stop().animate({"opacity": "1"}, "slow"); }); }); </script> <style> div.fadehover { position: relative; } img.a { position: absolute; left: 0; top: 0; z-index: 10; } img.b { position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="fadehover"> <img src="cbavota-bw.jpg" alt="" class="a" /> <img src="cbavota.jpg" alt="" class="b" /> </div> </body> </html>
Espero que tenham gostado.
Tutorial originalmente retiro de > http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
Parabéns! Valeu pela ajuda!
ResponderExcluirCara, parabéns pela dica. Só acho que errou ali na parte onde você fala "Agora o código do estilo CSS:"
ResponderExcluirVocê colocou o HTML do Div e não o CSS ;)