jQuery IE problems - need expert input

[sethwb]

Problem:

My colleague has added a jQuery script that causes images to fade out and new ones fade in when a user chooses a different color. HOWEVER, the fading effects cause IE to bug out, the images flicker but never swap and it destroys the IE PNG hack in IE6.

What I need:
-to get the jQuery fadeTo (or suitable alternative) working in all versions of IE
-to work with the PNG hack for IE6
-work with all major browsers
-work with dynamic SRC/pathnames (from Fatwire Content Server)

...

function colorSelectedUpdater() {
 
        var whatever = $("#color-chooser ul li a");
 
        whatever.live("click", function(){
 
                        var className = $(this).attr("class");
 
                        //var imgSrc = $(this).attr("href");
 
                        var currentColor = $(this).text();
 
                        $("#color-selected").text(currentColor);
 
                        $("#scope-stage").fadeTo("fast", .90);
 
                        $("#scope-stage").removeAttr("class").addClass(className);
 
                        $("#scope-image").fadeTo("fast", .90);
 
                        $("#scope-image").attr("src", $(this).attr("href"));
 
                        $("#scope-image").fadeTo("fast", 1);
 
                        $("#scope-stage").fadeTo("fast", 1);
 
                        
 
                        return false;
 
                }                                                                        
 
        )
 
}
 
 
 
...
 
 
<div id="scope-stage">
          <img src="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" alt="" id="scope-image" />
          <div id="lifestyle"><img src="/3MContentRetrievalAPI/BlobServlet?assetId=1180618133428&assetType=MMM_Image&blobAttribute=ImageFile" alt="" /></div>
        </div>
      </div>
      <div style="visibility: hidden;clear: both;">.</div>
      <div id="color-chooser">
        <span id="color-name">Choose a Color ></span>
        <ul>
          <li class="black"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="black">Black</a></li>
          <li class="burgundy"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="burgundy">Burgundy</a></li>
          <li class="navy-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="navy-blue">Navy Blue</a></li>
          <li class="hunter-green"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="hunter-green">Hunter Green</a></li>
          <li class="gray"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="gray">Gray</a></li>
          <li class="pine-green"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="pine-green">Pine Green</a></li>
          <li class="ceil-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="ceil-blue">Ceil Blue</a></li>
          <li class="raspberry"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="raspberry">Raspberry</a></li>
          <li class="caribbean-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="caribbean-blue">Caribbean Blue</a></li>
          <li class="orange"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="orange">Orange</a></li>
          <li class="seafoam-green"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="seafoam-green">Seafoam Green</a></li>
          <li class="ocean-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="ocean-blue">Ocean Blue</a></li>
          <li class="peach"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="peach">Peach</a></li>
          <li class="black-edition"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="black-edition">Black Edition</a></li>
        </ul>
        <span id="color-selected">Black</span>
      </div>
    </div>