Image scroller 'lagging' when using background-size

Image scroller 'lagging' when using background-size

Hi,
I am currently building a fullheight thumbnail scroller with thumbnails of 700px. However I want these thumbnails to stretch the full height of the container, hence I want to use this:

  1. #scroller li.cover a,#scroller li.cover a div{background-position:top center;background-repeat:no-repeat;background-size:cover;}
However this makes the scroller really laggy, you can see it at: my website
When I remove the background-size from the css property, the problem is solved. However I do still want to stretch full background width. How can I solve this? My full jQuery:

  1. (function($){
  2.     var $container;
  3.     var $containerwidth;
  4.    
  5.     var $startheight;
  6.     var $startwidth;
  7.    
  8.     var $window = $(window);
  9.     var $windowtop;
  10.    
  11.     var $list = $("#scroller ul");
  12.     var $box = $("#scroller li");

  14.     $.fn.outofbounds = function() {
  15.         // define all variables
  16.         $container = $(this);
  17.         $startheight = $(this).height();
  18.         $startwidth = $box.width();
  19.         $windowtop = (($window.height() - $startheight) / 2) * -1;
  20.         // set the width of the scroller really really high
  21.         $container.width(999999);
  22.         // get the actual width
  23.         $containerwidth = $list.width();
  24.         $list.css({"display":"block"});
  25.        
  26.         // when the document is ready
  27.         $(document).ready(function(){
  28.             $box.each(function() {
  29.                 var t = $(this);
  30.                 var location = t.attr("class");
  31.                 t.find("a").css({"background-image":"url(./assets/images/"+location+"/color.jpg)"}).append("<div>").find("div").css({"background-image":"url(./assets/images/"+location+"/grey.jpg)"});
  32.             });
  33.             $box.addClass("cover");
  34.         });
  35.        
  36.         // and everything is loaded
  37.         $window.bind("load", function(){
  38.             // give all boxes a hover effect
  39.             $box.hover(handle_over, handle_out);

  41.             // move over the scroller and see what happens
  42.             $container.bind("mousemove", function(event) {
  43.                 mouse_move(event);
  44.             });
  45.         });
  46.     }
  47.    
  48.     function handle_over() {
  49.         $(this).find("div").stop().animate({opacity:0}, 750);
  50.         return false;
  51.     }
  52.    
  53.     function handle_out() {
  54.         $(this).find("div").stop().animate({opacity:1}, 500);
  55.         return false;
  56.     }
  57.    
  58.     function mouse_move(event) {
  59.         if($containerwidth > $window.width()) {
  60.             var mouse_pos = event.pageX;
  61.             var mouse_perc = mouse_pos / ($window.width());
  62.             var dest = -(($containerwidth - $window.width()) * mouse_perc);
  63.             $container.stop().animate({left:dest}, 400, "linear");
  64.         } else {
  65.             $container.css("left",0);
  66.         }
  67.         return false;
  68.     }
  69. })(jQuery);
What am I doing wrong? Pleas beware I'm a designer, not a high tech technician

Thank you,

Maarten