IE7 和 jquery 动画的奇怪问题：使用 jquery 1.3.2、coda-slider 2.0 和 jquery.easing 1.3

Question

我正在尝试修改 Coda-Slider 2.0 (http://www.ndoherty.biz/tag/coda-slider/) 以使用基于百分比的宽度，而不是硬编码的像素宽度，以允许流体调整大小。我已经让它工作得非常好，除了 IE7 中的一个小故障（Firefox 没有表现出这种行为），当我尝试返回到面板 1 时。

当我运行 coda-slider 2.0 附带的默认 index.html 时， IE7 下一切正常。然后我使用图像而不是默认文本，效果也很好。然后我更改了 CSS 和 JS 以使用百分比宽度 - 这非常有效，除了当我尝试返回到第一个面板时 - 当我这样做时，比如说，从面板 4，而不是平滑地动画回到面板 1 视图立即跳转到面板 1 和面板 2 之间的中间，然后动画回到面板 1。

这可以在我设置的测试站点上看到：

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

我正在使用的修改后的 Coda-Slider JS 文件的来源如下。注意我删除了所有非必要的代码以简化调试。

问题与该行有关：

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

我认为动画可能不喜欢将“0%”作为值输入，因此我尝试在选择面板 1 时输入“0”和“0px” - 结果相同。最终结果是正确的 - 最终 div 正确定位在 margin-left: 0 处，但我不知道为什么它在这样做之前跳到面板 1 和面板 2 之间的中间位置。 （从面板 4 到面板 3 或面板 2 的动画效果很好）。我尝试使用“left”而不是“margin-left”，得到了相同的结果。

错误还是愚蠢的、被忽视的错误？任何建议将不胜感激！

js文件来源：

    $(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 });
                    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++;

    });
};

Answer 1

你有什么理由使用 2 年前的 jQuery 1.3.2 吗？对于一个成立还不到 5 年的库来说，这已经是很多了。

您使用当前稳定版本的 jQuery（1.5.1）是否遇到同样的问题？

您确定IE使用标准模式和最新的渲染引擎来渲染您的页面吗？

使用此元标记：

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

并查看使用最新稳定版本的 jQuery 是否遇到相同的问题。自 1.3 版本以来，它发生了很大变化。