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 id="postup" class="postup"></div> <button onclick="prubeh(0.5, document.getElementById('postup'))">Animovat 0.5 s</button> <button onclick="prubeh(2, document.getElementById('postup'))">Animovat 2 s</button>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.postup {height: 10px; background: green; width: 0; position: fixed; top: 0; left: 0;}
CSS
Autoformát
CSS reset
Až na konci
var prubeh = function(cas, 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>