maximamus, так?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
</head>
<body>
<button class="js-button" data-toggle-text="×">≡</button>
<div class="js-container">
<div>
<img src="http://game-tournaments.com/media/smile/yo.png" alt="" />
</div>
</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 img = document.querySelector('.js-container img');
var i = 0;
button.onclick = function() {
toggle(img);
};
function changeImage() {
img.src = images[++i % images.length];
}
function toggle(elem) {
if (elem.offsetHeight) {
animate(elem, 1000);
} else {
changeImage();
animate(elem, 1000)
}
}
function animate(elem, duration) {
var begin = performance.now();
var startHeight = elem.offsetHeight;
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);
});
}
</script>
<!--<script src="http://localhost:35729/livereload.js"></script>-->
</body>
</html>