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
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript"> $(function() { var speed = 250; var hide = { marginLeft: '50%', width: 0, opacity: 0 }; var show = { marginLeft: 0, width: '100%', opacity: 1 }; function flip() { $('*', this).stop(); $visible = $(':visible', this); $hidden = $(':hidden', this); $visible.animate(hide, speed, function() { $visible.hide(); $hidden .css(hide) .show() .animate(show, speed); }); } $(document).on({ mouseenter: flip, mouseleave: flip }, '.flip'); }); </script> <style> .flip { position: relative; overflow: hidden; width: 200px; height: 200px; } .flip img { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; } .flip img:first-child { display: block; } </style> </head> <body> <div class="flip"> <img src="http://malsup.github.com/images/beach2.jpg" /> <img src="http://malsup.github.com/images/beach3.jpg" /> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>