+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: CSS3 transitions (/showthread.php?tid=9208)
CSS3 transitions - downv - 19-06-2011 00:19
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
RE: CSS3 transitions - Mettafox - 19-06-2011 04:54
Experimenta assim:
li:hover{
-moz-transition-property: background;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in-out;
-moz-transition-delay: 100ms;
}
RE: CSS3 transitions - downv - 19-06-2011 14:02
Ja tinha experimentado..
Pelo que li na net não da para adicionar transitions a elementos que contenham a propriedade "display".
RE: CSS3 transitions - Mettafox - 23-06-2011 20:39
(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...
RE: CSS3 transitions - downv - 27-06-2011 19:53
Podia adicionar as animações com jquery, mas só quero que seja CSS, vou deixar assim.
RE: CSS3 transitions - Mettafox - 10-07-2011 14:44
(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:...,
.......
});