fadeIn/fadeOut not working in IE

fadeIn/fadeOut not working in IE

I'm building a webpage using the fadeIn and fadeOut effects. For some reason, it's working fine in Firefox 3.0.x but It simply doesn't fade in IE7.

In IE7 (and 8) the image just changes without fading. I suppose it's a graceful degradation, but my understanding was that this was supposed to work in all major browsers.

Oh, and there are no javascript errors in any of the browsers.

Here's the site:
http://www.patriciashin.com

and here's the jquery:
var left_offset = 0;
var fade_time = 500; // twice this is the total time taken to fade out and back in ms

$(document).ready(function() {
  var top = 45;
  var left = 11 + left_offset;
  var width = $("#offset_0 .width").html();
  var height = $("#offset_0 .height").html();
  if (width == 261) {
    var offset = (231 - height)/2;
    top += offset;
  }
  else {
    var offset = (261 - width)/2;
    left += offset;
  }
  $("#view div.image").css("background", "url(" + $("#offset_0 .image_path img").attr('src') + ") no-repeat "+left+"px "+top+"px");

  $("#gallery img").click(function() {
    var filename = this.id; // thumb_##
    // set up selectors
    var title_selector = "#" + filename.replace(/thumb_/, "image_") + " .title";
    var size_selector = "#" + filename.replace(/thumb_/, "image_") + " .dimensions";
    var media_selector = "#" + filename.replace(/thumb_/, "image_") + " .media";
    var image_selector = "#" + filename.replace(/thumb_/, "image_") + " .image_path img";
    var id_selector = "#" + filename.replace(/thumb_/, "image_") + " .id";
    var width_selector = "#" + filename.replace(/thumb_/, "image_") + " .width";
    var height_selector = "#" + filename.replace(/thumb_/, "image_") + " .height";
    // make changes
    $("#view #main").fadeOut(fade_time, function() {
      $("#description p.title").html($(title_selector).html() + ".");
      $("#description p.size").html("size: " + $(size_selector).html());
      $("#description p.media").html("media: " + $(media_selector).html());

      var width = $(width_selector).html();
      var height = $(height_selector).html();
      top = 45;
      left = 11 + left_offset;
      if (width == 261) {
        var offset = (231 -height)/2;
        top += offset;
      }
      else {
        var offset = (261 - width)/2;
        left += offset;
      }
      $("#view .image").css("background", "url(" + $(image_selector).attr('src') + ") no-repeat "+left+"px "+top+"px");
      $("#view .image").css("background-size", "auto");
      $("#view #main").fadeIn(fade_time);
    });
  });
 
  $(".slider").slider({
    animate: false,
    change: handleChange,
    slide: handleSlide
  });
  function handleChange(e, ui) {
    var maxScroll = $("#gallery").attr("scrollWidth") - $("#gallery").width();
    $("#gallery").animate({scrollLeft: ui.value * (maxScroll / 100)}, 1000);
  }
  function handleSlide(e, ui) {
    var maxScroll = $("#gallery").attr("scrollWidth") - $("#gallery").width();
    $("#gallery").attr({scrollLeft: ui.value * (maxScroll / 100)});
  }
});


Thanks for any help