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
<ul> <li></li> <li></li> <li></li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
span.downwardsLine, span.forwardsLine { opacity: 1; position: relative; right: 0; transition: opacity linear 500ms, right ease-out 500ms; display: inline-block; } span.downwardsLine.hidden, span.forwardsLine.hidden { opacity: 0; right: 10px; } span.downwardsLine { border-right: 1px solid #000; line-height: 0.8em; } span.forwardsLine { width: 100px; border-bottom: 1px solid #000; }
CSS
Autoformát
CSS reset
Až na konci
var Animate = function(elements){ this.elements = elements; this.AnimationElement = function(element){ this.node = element; this.line = {downwards: null, forwards: null}; this.timeouts = []; this.pushDownwardsLine = function(){ var line = document.createElement('span'); line.className = 'downwardsLine hidden'; line.innerHTML = ' ' this.node.appendChild(line); this.line.downwards = line; return line; } this.animateDownwards = function(){ var line = this.pushDownwardsLine(); (function(l, i){ i.push(setTimeout(function(){ l.classList.remove('hidden'); }, 50)); })(line, this.timeouts); } this.exitDownwards = function(){ this.line.downwards.classList.add('hidden'); (function(t){ setTimeout(function(){ t.node.removeChild(t.line.downwards); }, 500); })(this); } this.pushForwardsLine = function(){ var line = document.createElement('span'); line.className = 'forwardsLine hidden'; this.node.appendChild(line); this.line.forwards = line; return line; } this.animateForwards = function(){ var line = this.pushForwardsLine(); (function(l, i){ i.push(setTimeout(function(){ l.classList.remove('hidden'); }, 50)); })(line, this.timeouts); } this.exitForwards = function(){ this.line.forwards.classList.add('hidden'); (function(t){ setTimeout(function(){ t.node.removeChild(t.line.forwards); }, 500); })(this); } this.animate = function(){ this.animateDownwards(); (function(t){ t.timeouts.push(setTimeout(function(){ t.animateForwards(); }, 500)); })(this); } this.cancelTimeouts = function(){ for(var i = 0; i < this.timeouts.length; i++){ clearTimeout(this.timeouts[i]); } } this.exit = function(){ this.cancelTimeouts(); this.exitForwards(); (function(t){ setTimeout(function(){ t.exitDownwards(); }, 250); })(this); } } for(var i = 0; i < this.elements.length; i++){ var element = this.elements[i]; element = new this.AnimationElement(element); (function(e, o){ e.addEventListener('mouseover', function(){ o.animate(); }); e.addEventListener('mouseout', function(){ o.exit(); }); })(element.node, element); } } var ul = document.getElementsByTagName('li'); Animate(ul);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>