Animated growing width

Continuous animation of changing width of wrapper div.

by Jon Fuller

HTML

<div class="wrapper">
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div><img src="http://placehold.it/100x70" alt=""></div>
  <div></div>
</div>

CSS

.wrapper {
    text-align: justify;
    width: 380px;
    margin: 0 auto;
}

.wrapper div {
    width: 100px;
    display: inline-block;
}

JavaScript

animate();

function animate (width) {
    width = width || 320;
    $('.wrapper').animate({
        width: width
    }, 1000, function () {
        animate(width == 320 ? 380 : 320);
    });
}