Strange problem w/ IE7 and jquery animation: using jquery 1.3.2, coda-slider 2.0, and jquery.easing 1.3

I am trying to modify Coda-Slider 2.0 (http://www.ndoherty.biz/tag/coda-slider/) to use percentage-based widths, instead of hardcoded pixel widths, to allow for fluid resizing. I've gotten it to work fabulously, except for a small glitch in IE7 (Firefox does not exhibit this behavior) when I try and move back to panel 1.

When I run the default index.html that comes with coda-slider 2.0, everything works fine in IE7. I then sub in images instead of the default text and that works fine as well. I then changed the CSS and JS to use percentage widths - this works great, except for when I try and return back to the first panel - when I do that, say, from panel 4, instead of smoothly animating back to panel 1 the view jumps instantly to halfway between panel 1 and panel 2, and THEN animates back to panel 1.

This can be seen at a test site I set up:

http://www.lootcorp.com/animateissue/

The source of the modified Coda-Slider JS file I am using is below. Note I stripped out all nonessential code to simplify debugging.

The problem is tied to the line:

offset = - (panelWidth*z) + "%";

I thought maybe the animation didn't like getting fed "0%" as a value, so I tried feeding it "0" and "0px" when panel 1 was selected - same result. The end result is correct - eventually the div is positioned properly at margin-left: 0, but I have no idea why it skips to a position halfway between panel 1 and 2 before doing so. (Animation from panel 4 to 3 or 2 works fine). I tried using 'left' instead of 'margin-left' with the same results.

Bug or stupid, overlooked mistake? Any advice is greatly appreciated!!

js file source:

    $(function(){
    // Remove the coda-slider-no-js class from the body
    $("body").removeClass("coda-slider-no-js");
    // Preloader
    $(".coda-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="images/ajax-loader.gif" alt="loading..." /></p>');
});

var sliderCount = 1;

$.fn.codaSlider = function(settings) {

    settings = $.extend({
        autoHeight: true,
        autoHeightEaseDuration: 1000,
        autoHeightEaseFunction: "easeInOutExpo",
        autoSlide: false,
        autoSlideInterval: 7000,
        autoSlideStopWhenClicked: true,
        crossLinking: true,
        dynamicArrows: true,
        dynamicArrowLeftText: "&#171; left",
        dynamicArrowRightText: "right &#187;",
        dynamicTabs: true,
        dynamicTabsAlign: "center",
        dynamicTabsPosition: "top",
        externalTriggerSelector: "a.xtrig",
        firstPanelToLoad: 1,
        panelTitleSelector: "h2.title",
        slideEaseDuration: 1000,
        slideEaseFunction: "easeInOutExpo"
    }, settings);

    return this.each(function(){


        var slider = $(this);


        var panelCount = slider.find(".panel").size();

        var panelWidth = 100;
        var panelContainerWidth = "400%";

        var navClicks = 0; // Used if autoSlideStopWhenClicked = true

        // Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
        $('.panel', slider).wrapAll('<div class="panel-container"></div>');
        // Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
        $(".panel-container", slider).css({ width: panelContainerWidth });

        // Specify the current panel.
        // If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
        if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
            var currentPanel = parseInt(location.hash.slice(1));
            var offset = - (panelWidth*(currentPanel - 1)) + "%";
            $('.panel-container', slider).css({ marginLeft: offset });
        // If that's not the case, check to see if we're supposed to load a panel other than Panel 1 initially...
        } else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) { 
            var currentPanel = settings.firstPanelToLoad;
            var offset = - (panelWidth*(currentPanel - 1)) + "%";
            $('.panel-container', slider).css({ marginLeft: offset });
        // Otherwise, we'll just set the current panel to 1...
        } else { 
            var currentPanel = 1;
        };



        // If we need a dynamic menu
           if (settings.dynamicTabs) {
            var dynamicTabs = '<div class="coda-nav" id="coda-nav-' + sliderCount + '"><ul></ul></div>';
            switch (settings.dynamicTabsPosition) {
                case "bottom":
                    slider.parent().append(dynamicTabs);
                    break;
                default:
                    slider.parent().prepend(dynamicTabs);
                    break;
            };
            ul = $('#coda-nav-' + sliderCount + ' ul');
            // Create the nav items
            $('.panel', slider).each(function(n) {
                ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>');                                               
            });
            navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
            ul.parent().css({ width: navContainerWidth });
            switch (settings.dynamicTabsAlign) {
                case "center":
                    ul.css({ width: ($("li", ul).width() + 2) * panelCount });开发者_如何学C
                    break;
                case "right":
                    ul.css({ float: 'right' });
                    break;
            };
        };

        // If we need a tabbed nav
        $('#coda-nav-' + sliderCount + ' a').each(function(z) {
            // What happens when a nav link is clicked
            $(this).bind("click", function() {
                navClicks++;
                $(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
                if (z == 0) {
                    offset = "+0px";
                } else {
                    offset = - (panelWidth*z) + "%";
                }
                alert("Offset = " + offset);
        //      alterPanelHeight(z);
                currentPanel = z + 1;
                $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
                if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
            });
        });


        // Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
        if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
            $("#coda-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
        // If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
        } else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
            $("#coda-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
        // Otherwise we must be loading Panel 1, so make the first tab the current one.
        } else {
            $("#coda-nav-" + sliderCount + " a:eq(0)").addClass("current");
        };


        // Kill the preloader
        $('.panel', slider).show().end().find("p.loading").remove();
        slider.removeClass("preload");

        sliderCount++;

    });
};

---

Is there any reason why are you using jQuery 1.3.2 which is over 2 years old? For a library that isn't even 5 years old that is a lot.

Do you have the same problem using the current stable version of jQuery which is 1.5.1?

Are you sure that the IE uses the standards mode and the latest rendering engine to render your page?

Use this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

and see if you have the same problems using the latest stable version of jQuery. It has changed a lot since version 1.3.