title: Split and animate multiple images in jQuery
body: <p>I would like to split two images in pieces before making them both disappear randomly in the same time.</p>
  
  <p>Here's the link: <a href="http://www.bluey.fr/explosion/" rel="nofollow">www.bluey.fr</a>.</p>
  
  <p>My problem is that it doesn't work for the second div containing the image...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button&gt;Animate&lt;/button&gt;
  
  &lt;div class="fragments"&gt;
    &lt;img src="img/vignettes/illustrations_perso.jpg"/&gt;
  &lt;/div&gt;
  
  &lt;div class="fragments"&gt;
    &lt;img src="img/vignettes/bonhomes.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.fragments {
      position: relative;
      width: 142px; 
      height: 142px;
      margin:10px;    
  }
  
  .fragments img {
      width:100%;
      height:100%;
  }
  
  .fragment { 
      float: left;
      opacity: 1;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
  }
  
  .fragment-animated {
      opacity: 0;
  }
  
  .css3-preload .fragments * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
  </code></pre>
  
  <p><strong>JAVSCRIPT</strong></p>
  
  <pre><code>;(function( $, window ) {
  
    var _defaults = {
      x      : 1, 
      y      : 1, 
      random : true, 
      speed  : 800,
      queue: false
    };
  
    function range( min, max, rand ) {
      var arr = ( new Array( ++max - min ) )
        .join('.').split('.')
        .map(function( v,i ){ return min + i })
      return rand
        ? arr.map(function( v ) { return [ Math.random(), v ] })
           .sort().map(function( v ) { return v[ 1 ] })
        : arr
    }
  
    $('body').addClass('css3-preload')
    $( window ).load(function(){ $('body').removeClass('css3-preload') })
  
    $.fn.fragments = function( options ) {
  
      var o = $.extend( {}, _defaults, options );
  
  return this.each(function() {
  
    var $container = $(this);
  </code></pre>
  
  <p>Make the fragments:</p>
  
  <pre><code>  var width = $container.width(),
        height = $container.height(),
        $img = $container.find('img'),
        n_fragments = o.x * o.y ,
        fragments = [], $fragments;
  
    for ( var i = 0; i &lt; n_fragments ; i++ ) {
      fragments.push('&lt;div class="fragment"/&gt;');
    }
  
    $fragments = $( fragments.join('') );
  
    // Hide original image and insert fragments in DOM
    $img.hide().after( $fragments );
  
    // Set background
    $fragments.css({
      width: width / o.x,
      height: height / o.y,
      backgroundImage: 'url('+ $img.attr('src') +')'
    });
  
    // Adjust position
    $fragments.each(function() {
      var pos = $(this).position();
      $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
    });
  </code></pre>
  
  <p>Animate the fragments:</p>
  
  <pre><code>  var fragmentsArr = range( 0, n_fragments, o.random ),
        fragmentSpeed = o.speed / n_fragments; // time to clear a single fragment
  
    // Public method
    $container.on( 'animate', function() {
  
      fragmentsArr.forEach(function( fragment, i ) {
        setTimeout(function(){
          $fragments.eq( fragment ).toggleClass( 'fragment-animated' );
        }, i * fragmentSpeed );
      });
  
    });
  
  });
  
    };
  
  
  }( jQuery, window ));
  
  $('.fragments').fragments({ x: 3, y: 3});
  
  $('button').click(function() {
      $('.fragments').trigger('animate');
  });
  </code></pre>
  
  <p>Thanks!</p>