JsCode
-
Total de itens
1 -
Registro em
-
Última visita
Sobre JsCode
-
Js Loop - Inserir transição em varios objetos com uma mesma função com intervalos diferentes entre si
JsCode postou um tópico no fórum Javascript
Olá pessoal. Estou iniciando com JavaScript e gostaria da ajuda de vcs. Estou construindo um menu e gostaria de animar os tópicos do menu de maneira que eles se desloquem horizontalmente tendo um delay entre o primeiro e o segundo , outro maior entre o segundo e o terceiro, e assim por diante. Aparecendo um de cada vez. O exemplo abaixo esta funcionando, mas os tópicos do menu aparecem todos ao mesmo tempo. <!DOCTYPE html> <html> <title> </title> <head> </head> <style> .menu{position:absolute; margin-top:0em;} ul{position:absolute; margin-top:3em;} li{transform:translateX(-500%); transition:all 1s ease-in-out; list-style: none;} #result{width:100%; position:absolute; z-index:99; margin-top:1em; margin-left:6em; color:green;} .p_on{width:100%; position:absolute; z-index:99; margin-top:0.5em; margin-left:1.2em; color:white; display:block;} .p_off{width:100%; position:absolute; z-index:99; margin-top:0.5em; margin-left:1.2em; color:black; display:block;} input{display:none;} label{cursor:pointer; display:block;} .menu_on{width:5em; height:2em; margin-top:0em; background-color:black; position:absolute; z-index:98;} .menu_off{width:5em; height:2em; margin-top:0em; background-color:yellow; position:absolute; z-index:97;} #menu_input_on_id:checked ~ label .menu_off{z-index:99;} #menu_input_off_id:checked ~ label .menu_on{z-index:99;} </style> <body> <input type="radio" name="menu_input" id="menu_input_on_id" onclick="move_on()"> <input type="radio" name="menu_input" id="menu_input_off_id" onclick="move_off()"> <label for="menu_input_on_id"><div class="menu_on"><p class="p_on">clicar</p></div></label> <label for="menu_input_off_id"><div class="menu_off"><p class="p_off">clicar</p></div></label> <div class="menu"> <ul> <li>OBJETO</li> <li>OBJETO</li> <li>OBJETO</li> <li>OBJETO</li> <li>OBJETO</li> </ul> </div> <p id="result">teste</p> <script> var totalNumber; var i; var x; function contando(){ totalNumber = document.getElementsByTagName("li").length; document.getElementById("result").innerHTML = totalNumber; } function translate_on(){ x = document.querySelectorAll("li"); for(i = 0; i < totalNumber; i++){ x.style.transform = "translateX(0%)"; } } function translate_off(){ x = document.querySelectorAll("li"); for(i = 0; i < totalNumber; i++){ x.style.transform = "translateX(-500%)"; } } function move_on(){contando(); translate_on();} function move_off(){contando(); translate_off();} </script> </body> </html>