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는이 동작을 나타내지 않습니다)을 제외하고는 엄청나게 작동했습니다.

coda와 함께 제공되는 기본 index.html을 실행할 때 -slider 2.0, IE7에서는 모든 것이 잘 작동합니다. 그런 다음 기본 텍스트 대신 이미지에 하위로 표시하면 잘 작동합니다. 그런 다음 CSS와 JS를 백분율 너비를 사용하도록 변경했습니다. 첫 번째 패널로 돌아가려고 할 때를 제외하고는 훌륭하게 작동합니다. 예를 들어, 패널 4에서 말하면, 패널 1에 부드럽게 애니메이션을 적용하는 대신 패널 1 판 (2)의 중간에 즉시 이동 한 다음 다시이 내가 설정 테스트 사이트에서 볼 수 있습니다 1.

패널에 애니메이션을

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

수정 코다의 소스 사용중인 -Slider JS 파일은 다음과 같습니다. 참고 디버깅을 단순화하기 위해 모든 중요하지 않은 코드를 제거했습니다.

문제가 줄에 묶여 :

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

내가 애니메이션 값으로 공급 "0 %"점점 좋아하지 않았다 어쩌면 생각, 그래서 그것을 먹이 시도 "0"과 "0 픽셀" 패널 1이 선택되었을 때 - 동일한 결과. 최종 결과는 정확합니다 - 결과적으로 div는 margin-left : 0에 제대로 배치되지만 패널 1과 2의 중간 위치로 건너 뛴 이유는 알지 못합니다. (4 번에서 3 번 또는 2 번까지의 애니메이션은 괜찮습니다.) 나는 'margin-left'대신 '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 세가 아닌 도서관의 경우 은 많이입니다.

1.5.1 인 jQuery의 현재 안정 버전을 사용하는 것과 동일한 문제가 있습니까?

IE가 표준 모드와 최신 렌더링 엔진을 사용하여 페이지를 렌더링합니까?

사용이 메타 태그 :

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

당신이 jQuery를 최신 안정 버전을 사용하여 동일한 문제가 있는지 확인합니다. 버전 1.3 이후로 많이 바뀌 었습니다.