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
<a href="javascript:toggle2('mocodmoc-content');" title="">klikni</a> <div id="mocodmoc-content"> <div class="prvek"> <div class="odrazka"></div> <a href="" title="">skrytý</a> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#mocodmoc-content{ display: none; }
CSS
Autoformát
CSS reset
Až na konci
function toggle2(showText) { var ele = document.getElementById(showText); if (ele.style.display === "block") { fadeOut(ele, 400, function(){ele.style.display = "none";}); } else { ele.style.display = "block"; fadeIn(ele, 400); } } function fadeOut(element, duration, callback) { animate(element, 'opacity', 1, 0, duration, callback); } function fadeIn(element, duration, callback) { animate(element, 'opacity', 0, 1, duration, callback); } function animate(element, what, from, to, duration, callback) { if (typeof duration === 'undefined') { duration = 400; } if(performance.now) { var relativeTime = function(){return performance.now()}; } else { var relativeTime = function(){return new Date().getTime()}; } var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; element.style[what] = from var difference = to - from; var start = relativeTime(); (function inner() { var passed = relativeTime() - start; element.style[what] = from + difference * (passed / duration); if (passed < duration) { requestAnimationFrame(inner); } else { element.style[what] = to; if (typeof callback == 'function') { callback() } } })(); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>