Colocar Resposta 
 
Avaliação do Tópico:
  • 0 votos - 0 Média
  • 1
  • 2
  • 3
  • 4
  • 5
CSS3 transitions
19-06-2011, 00:19 (Esta mensagem foi modificada pela última vez a: 19-06-2011 00:20 por downv.)
Mensagem: #1
CSS3 transitions
Boas,

Estou a fazer um menu e queria usar umas transitions mas não estou a conseguir..

Tenho uma list com os links do menu e depois tenho um "div" com conteúdos (textos, imagens), a "div" esta com "display:none;" e quando esta o mouse hover "li:hover" a "div" fica com "display:block;" e aparece o conteúdo.

O que eu queria era meter umas transitions quando "li:hover" para a div aparecer "fadeInOut", mas não estou a conseguir..

Código:
/* Transitions */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

Obrigado

http://vtimbuc.net/
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
19-06-2011, 04:54
Mensagem: #2
RE: CSS3 transitions
Experimenta assim:

li:hover{
-moz-transition-property: background;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in-out;
-moz-transition-delay: 100ms;
}
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
19-06-2011, 14:02
Mensagem: #3
RE: CSS3 transitions
Ja tinha experimentado..

Pelo que li na net não da para adicionar transitions a elementos que contenham a propriedade "display".

http://vtimbuc.net/
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
23-06-2011, 20:39
Mensagem: #4
RE: CSS3 transitions
(19-06-2011 14:02)downv Escreveu:  Ja tinha experimentado..

Pelo que li na net não da para adicionar transitions a elementos que contenham a propriedade "display".

Usa JS para esconder e fazer aparecer os elementos que queres.
Pode ser que assim resolva o problema...
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
27-06-2011, 19:53
Mensagem: #5
RE: CSS3 transitions
Podia adicionar as animações com jquery, mas só quero que seja CSS, vou deixar assim.

http://vtimbuc.net/
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
10-07-2011, 14:44
Mensagem: #6
RE: CSS3 transitions
(27-06-2011 19:53)downv Escreveu:  Podia adicionar as animações com jquery, mas só quero que seja CSS, vou deixar assim.

E podes usar na mesma jQuery e CSS.
Por exemplo:
$("#id").css("display", "none");

Para vários styles:

$("#id").css({
style1:...,
style2:...,
.......
});
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)