var $gal   = $('#gallery');

var width  = $gal.outerWidth();

var height = $gal.outerHeight();

var img = [

  "http://www.vivaboo.com/wp-content/uploads/2010/05/monarch-butterfly-butterflies-nature-insect-animal-17.jpg",

  "http://600.mywallpapers.org/wallpapers/2/273/thumb/600_Nature-007.jpg"

];

var n = img.length;

var c = 0;

​

// Effects:

var fx = [

  {top: -height},

  {opacity: 0},

  {top:  height},

  {left: -width}

];

​

// Random FX:

function randFX(){

  return fx[ Math.floor(Math.random()*fx.length) ];

}

​

// Preload all images:

for(var i=0; i<img.length; i++){

  var nImg = new Image();

  nImg.src = img[i];

}

​

// Creates a new set of 5 DIV:

function div5(){

  var w5 = width/5 ;

  for(var i=0; i<5; i++){

    var div = $("<div />", {

      'class' : "div5",

      'style' : "background: url("+img[c]+") "+ (-w5*i) +"px 0"

    });

    $gal.append(div);

  }

}

div5();

​

// Animates current set

function animDiv5(){

  // Prepare next image as gallery normal background image

  $gal.css({background: "url("+ img[c] +")"});

  // Generate a random animation

  var animfx = randFX();  

  // Animate Current DIVs

  $("div", $gal).each(function(i){

    $(this).stop().delay(70*i).animate( animfx, function(){

      if(!$(this).next()[0]){ // Once all are animated...

         $gal.html(""); // Remove DIVs

         // The gallery BG was visible for a tily amount of time,

         // now cover it with the same image but again splitted in DIVs

         div5(); 

      }

    });

  });

}

​

​

​

// Do it!

$("button").click(function(){

    c = ++c % n; // Increment counter

    animDiv5();

});

​

​

​