Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="obal" id="obal"> <div class="postup"></div> </div> <button onclick="prubeh(0.5, document.getElementById('obal'))">Animovat 0.5 s</button> <button onclick="prubeh(1, document.getElementById('obal'))">Animovat 1 s</button>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obal {background: red; width: 100px; height: 10px; position: relative;} .postup {height: 10px; background: green; width: 0; position: absolute; top: 0; left: 0;}
CSS
Autoformát
CSS reset
Až na konci
var prubeh = function(cas, obal) { var postup = obal.querySelector(".postup"); var animovat = function() { postup.style.transition = "width " + cas + "s"; postup.style.width = "100%"; }; var vycistit = function() { postup.style.width = "0"; postup.style.transition = ""; }; animovat(); setTimeout(vycistit, cas * 1000); };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>