<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<style>
.hidden img {
height: 0;
}
</style>
</head>
<body>
<button class="js-button" data-close="×" data-open="≡">≡</button>
<div class="js-container hidden">
<img src="http://game-tournaments.com/media/smile/yo.png" alt="" />
</div>
<script>
var images = ['http://game-tournaments.com/media/smile/yo.png', 'http://www.likiliks.ru/images/smile_high.png'];
var button = document.querySelector('.js-button');
var container = document.querySelector('.js-container');
var img = container.querySelector('img');
var animated = false;
var i = 0;
button.onclick = function() {
toggle(img);
};
function changeImage() {
img.src = images[i++ % images.length];
}
function toggle(elem) {
if ( container.classList.contains('hidden') ) {
button.innerHTML = button.dataset.close;
animate(elem, 1000, function() {
container.classList.remove('hidden');
changeImage();
});
} else {
button.innerHTML = button.dataset.open;
animate(elem, 1000, function() {
container.classList.add('hidden');
});
}
}
function animate(elem, duration, callback) {
if (animated) return;
var begin = performance.now();
var startHeight = elem.offsetHeight;
animated = true;
window.requestAnimationFrame(function animate(now) {
var progress = (now - begin) / duration;
progress > 1 && (progress = 1);
if (startHeight)
elem.style.height = (startHeight - startHeight * progress) + 'px';
else
elem.style.height = progress * 256 + 'px';
(progress < 1) ? window.requestAnimationFrame(animate) : animated = false;
});
setTimeout(callback, 0);
}
</script>
<!--<script src="http://localhost:35729/livereload.js"></script>-->
</body>
</html>