jQuery: resize background images

Resizing background images requires a further study with jQuery. I've tried a simple experiment by using 11 different background images depicting the same image but with scaling and proportional dimensions. I've then applied each image to a different CSS class to be used on the same element. The CSS code is as follows:

div {
 width: 300px;
 height: 300px;
 background-position: 50% 0;
 background-repeat: no-repeat;
 background-image: url(splat-1.jpg);
 border: 1px solid gray;
}

.size2 {
 background-image: url(splat-2.jpg);
}
.size3 {
 background-image: url(splat-3.jpg);
}
.size4 {
 background-image: url(splat-4.jpg);
}
.size5 {
 background-image: url(splat-5.jpg);
}
.size6 {
 background-image: url(splat-6.jpg);
}
.size7 {
 background-image: url(splat-7.jpg);
}
.size8 {
 background-image: url(splat-8.jpg);
}
.size9 {
 background-image: url(splat-9.jpg);
}
.size10 {
 background-image: url(splat-10.jpg);
}
.size11 {
 background-image: url(splat-11.jpg);
}

Then I've created a JavaScript timer that changes such classes every 100 milliseconds:

$(document).ready(function() {

  var counter = 0;  
  var interval = setInterval(function() {

    counter += 1;
    
    if(counter == 11) {
    
      clearInterval(interval);
    
    }
    
    $('div').addClass('size' + counter);
   

  }, 100);
});

I've uploaded a video that shows the results in Firefox 4:

Demo

Live demo