JQuery: Aplicar efeito de opacidade em uma imagem

Idéia: Ao passar o mouse sobre o link, uma imagem será exibida. O efeito ocorre alterando a sua opacidade.

Apresento 2 formas de como aplicar o efeito, usando fadeTo() ou animate().

<html>
<head>
<style type="text/css">
  img { opacity: 0; display:block;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("a.efeito").mouseover(function(){
    $(this).prev().fadeTo("slow", 4);
  }).mouseout(function(){
    $(this).prev().fadeTo("slow", 0);
  });
 
  // outra forma
  $("a.efeito").hover(function() {
    $(this).prev().animate({"opacity": "1"}, "slow");
  },function() {
    $(this).prev().animate({"opacity": "0"}, "slow");
  });
});	
</script>	
</head>
<body>
<div>
    <img class="" src="http://www.linhadecomando.com/wp-content/uploads/Logo__2.png" />
    <a href="#" class="efeito">Clique aqui para aplicar efeito</a>
</div>
</body>
</html>

Clique aqui para ver o script funcionando.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *