Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fábio Augusto

Efeito Fade

Por , em Desenvolvimento frontend

Recommended Posts

Fábio Augusto    1

Fábio Augusto
Postado

Estou precisando de uma ajuda aqui, já procurei diversos sites que mostram como fazer efeito Fade em Links, todos funcionaram muito bem, mas o problema é que meu código não é bem um link. O código é simples de entender vejam:

 

<head>
<style type="text/css">
#EfeitoMouse #Up{display:none}
#EfeitoMouse:hover #Up{display:block}
#EfeitoMouse:hover #Roll{display:none}
</style>
</head>
<body>
<div id="EfeitoMouse">
  <div id="Roll">
<a href="#">TEXTO ANTES DE PASSAR O MOUSE
</a>
  </div>
  <div id="Up">
<a href="#">TEXTO DEPOIS DE PASSAR O MOUSE
</a>
</div>
</div>
</body>

Resumindo, se passar o mouse em cima da frase mostra a DIV "oculta" (no caso a div "Up").

 

Esta parte funciona do jeito que eu quero, não tenho o que mexer nessa parte.

Mas seria perfeito se tivesse um efeito de "fade" quando passamos o mouse em cima da div. Já tentei fazer com o código que funciona em textos com link, mas não funcionou.

 

Só para terem um exemplo de como quero que fique, acesse essa página do tumblr e passe o mouse em cima de qualquer foto: http://www.tumblr.com/tagged/dog. No tumblr é rápido e é assim que eu quero que o efeito seja.

 

Alguém pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flavio05    1

Flavio05
Postado

Não entendi muito bem o que você quer. Você quer usar em links ou em divs?

Se você quer um efeito de fade, acho que poderia usar uma combinação do recurso do CSS3 animation.

Mas não tenho um bom conhecimento sobre CSS3 ainda. Comecei a estuda-lo há pouco tempo.

Mas com JQuery você pode fazer mais ou menos o seguinte:

 

$(document).ready(function (){
    $("#div2").hide();
    $("#div1").mouseover(function (){
        $("#div1").fadeOut();
        $("#div2").fadeIn();
    });
    
    $("#div2").mouseout(function (){
        $("#div2").fadeOut();
        $("#div1").fadeIn();
    });
});

Isso para realizar o fade em divs. Onde:

1. Quando a página é carregada, a segunda div é ocultada;

2. Ao passar o mouse sobre a div1, ele desaparece com o efeito fade do JQuery, e logo em seguida, a div2 e exibida, também em um efeito fade;

3. E ao retirar o mouse ocorre o mesmo processo, porém no sentido inverso.

 

Segue um pequeno exemplo:

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #div1, #div2{
                width: 100px;
                height: 100px;
                position: absolute;
            }

            #div1{
                background-color: #0000ff;
                z-index: 1;
            }

            #div2{
                background-color: #00cc66;
                z-index: 2;
            }
        </style>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function (){
                $("#div2").hide();
                $("#div1").mouseover(function (){
                    $("#div1").fadeOut();
                    $("#div2").fadeIn();
                });

                $("#div2").mouseout(function (){
                    $("#div2").fadeOut();
                    $("#div1").fadeIn();
                });
            });
        </script>
    </head>
    <body>
        
        <div id="div1"></div>
        <div id="div2"></div>
        
    </body>
</html>

Será que é mais ou menos isso que você quer?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio Augusto    1

Fábio Augusto
Postado

Flavio05, tentei usar esse código como exemplo, ficou perfeito só que quando você move o mouse novamente ele faz de novo o efeito. Veja como ficou o código:

 

<!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" />
<style type="text/css">
body,td,th {
	font-family: "Calibri Light";
	color: #000;
}
#data {
	font-size: 30px;
	color: #FFF;
}
#titulo {
	font-size: 18px;
	color: #FFF;
}
</style>
<style type="text/css">
#DataModelo {
	font-family: "CM Sans Serif 2012";
	font-size: 30px;
	color: #FFF;
}
#TituloModelo {
	font-size: 25px;
	color: #FFF;
}
#CliqueModelo {
	font-size: 15px;
	color: #FFF;
}
</style>
        <style type="text/css">
            #div1, #div2{
                width: 375px;
                height: 125px;
                position: absolute;
            }

            #div1{
                z-index: 1;
            }

            #div2{
                z-index: 2;
            }
        </style>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function (){
                $("#div2").hide();
                $("#div1").mouseover(function (){
                    $("#div1").fadeOut();
                    $("#div2").fadeIn();
                });

                $("#div2").mouseout(function (){
                    $("#div2").fadeOut();
                    $("#div1").fadeIn();
                });
            });
        </script>
    </head>
    <body>
        
<a href="#"><div id="div1">
<table width="375" height="125" border="0" cellpadding="18" cellspacing="0" background="TesteRolloverImagensBGTrans.png">
  <tr>
    <td valign="top"><table width="100%" border="0" cellpadding="2" cellspacing="0">
      <tr>
        <td width="78%" id="data">DD/MM</td>
        <td width="11%" align="center"> </td>
        <td width="11%" align="center"> </td>
      </tr>
      <tr>
        <td colspan="3" id="titulo">Previa da matéria</td>
        </tr>
    </table></td>
  </tr>
</table>
        </div>
        <div id="div2">
<table width="375" height="125" border="0" cellpadding="18" cellspacing="0" background="TesteRolloverImagensBGTrans.png">
  <tr>
    <td valign="top"><table width="100%" border="0" cellpadding="2" cellspacing="0">
      <tr>
        <td width="78%" id="data">ler matéria</td>
        <td width="11%" align="center"></td>
        <td width="11%" align="center"><a href="https://twitter.com/share?text=A nova música de Olly Murs - Leia: http://www.yepmark.com/fones/c/a-nova-musica-de-olly-murs.php" target="_blank"><img src="TesteRolloverImagensT.png" width="26" height="26" border="0" /></a></td>
      </tr>
      <tr>
        <td colspan="3" id="titulo">Previa da matéria</td>
        </tr>
    </table></td>
  </tr>
</table>
        </div></a>
        
    </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flavio05    1

Flavio05
Postado

Não entendi bem o que você quis dizer.

Você está se referindo ao mesmo efeito fade só que ao retirar o mouse de cima do objeto?

Fiquei confuso agora.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito