Jquery交叉淡入淡出插件::爲什麼這段代碼不能在IE6 + 7中工作？

Question

爲什麼this code不能在IE6 + 7中工作？（我的代碼）

我檢查ie 6 + 7 - 檢查代碼工作在Firefox + ie8後沒有工作。

這個簡單的jquery燈光插件，通過交叉淡入淡出效果切換圖片。

(function($){ 

     $(document).ready(function() { 
     $('.sliderBox').CrossFadeSlider(); 
     }); 


    $.fn. CrossFadeSlider=function(options){ 
     //default settinfs 
     var settings={ 
      pagingWrapperClass: 'controls', 
      slideWrapperClass:'slider', 
      pagingWrapperElement:$('.controls'), 
      slideWrapperElement:$('.slider'), 
      slideTag: "li", 
      pagingTag:"li", 
      width:'790px', 
      height:'286px', 
      slideInterval:4000,//Timer speed in milliseconds (3 seconds) 
      autoplay:true 
     }; 

     $.extend(settings, options); 
     //set slide size 
     this.css('width',settings.width).css('height',settings.height); 
     //Add Default classes or it can be dome manually in code. 
     settings.pagingWrapperElement.addClass(settings.pagingWrapperClass); 
     settings.slideWrapperElement.addClass(settings.slideWrapperClass); 
     //create paging 
     var strPaging=''; 
     settings.slideWrapperElement.children().each(
      function(i,el){ 
       strPaging=strPaging+'<'+settings.pagingTag+'><a href="#'+$(this).attr("id")+'">'+(i+1)+'</a></'+settings.pagingTag+'>'; 
      } 
     ); 

     settings.pagingWrapperElement.append(strPaging); 

     //Set Default State of paging 
     $("."+settings.pagingWrapperClass).show(); 
     $("."+settings.pagingWrapperClass+" "+settings.pagingTag+":first").addClass("active"); 
     var active = $('.'+settings.pagingWrapperClass+" "+settings.pagingTag+'.active'); 
     var activeBefore = active; 
     //Set Default State of slides 
     $("."+settings.slideWrapperClass+" "+settings.slideTag).css('display','none'); 
     $("."+settings.slideWrapperClass+" "+settings.slideTag+":first").css('display','block'); 
     $("."+settings.slideWrapperClass+" "+settings.slideTag).css("background-color", "transparent"); 
     $("."+settings.slideWrapperClass+" "+settings.slideTag+" img").css("background-color", "transparent"); 

     //Paging + Slider Function 
     var rotate = function(){ 

      activeBefore.removeClass('active'); //Remove all active class 
      active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

      $(activeBefore.find('a').attr('href')).fadeOut('slow',function(){ 
       $(this).css('display','none'); 
      }); 

      $(active.find('a').attr('href')).fadeIn('normal',function(){ 
       //$(this).css('display','block'); 
      }); 
     }; 

     //Rotation + Timing Event 
     var rotateSwitch = function(){ 
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
       activeBefore=$('.'+settings.pagingWrapperClass+" "+settings.pagingTag+'.active'); 
       active = activeBefore.next(); 
       if (active.length === 0) { //If paging reaches the end... 
        active = $('.'+settings.pagingWrapperClass+" "+settings.pagingTag+':first'); //go back to first 
       } 
       rotate(); //Trigger the paging and slider function 
      }, settings.slideInterval); //Timer speed in milliseconds (3 seconds) 
     }; 

     rotateSwitch(); //Run function on launch 

     //On Hover 
     $("."+settings.slideWrapperClass+" "+settings.slideTag).hover(function() { 
      clearInterval(play); //Stop the rotation 
     }, function() { 
      rotateSwitch(); //Resume rotation 
     }); 

     //On Click 
     $("."+settings.pagingWrapperClass+" "+settings.pagingTag).click(function() { 
      active = $(this); //Activate the clicked paging 
      activeBefore=$("."+settings.pagingWrapperClass+" "+settings.pagingTag+'.active'); 
      //not doing nothing if active button pressed. 
      if(active.get(0)===activeBefore.get(0)){return false;} 
      //Reset Timer 
      clearInterval(play); //Stop the rotation 
      rotate(); //Trigger rotation immediately 
      rotateSwitch(); // Resume rotation 
      return false; //Prevent browser jump to link anchor 
     }); 
    }; 
    })(jQuery); 

Answer 1

這是IE瀏覽器實現了href屬性的方式有問題。而不是返回您想要的實際href值，類似於＃slide3，它將返回像http://mysite.com/#slide3這樣的絕對路徑。處理這個問題的簡單方法是拆分字符串，並提取所需的實際錨標記，該標記適用於所有瀏覽器。這是我改變了你的旋轉javascript函數：

    var rotate = function() { 

        activeBefore.removeClass('active'); 
        active.addClass('active'); 
        var href = activeBefore.find('a').attr('href'); 
        href = href.split('#'); 
        $('#' + href[href.length-1]).fadeOut('slow',function(){ 
        $(this).css('display','none'); 
       }); 

        href = active.find('a').attr('href'); 
        href = href.split('#'); 
        $('#' + href[href.length -1]).fadeIn('normal',function(){ 
        //$(this).css('display','block'); 
       }); 

       }; 

這是對的jsfiddle：http://jsfiddle.net/eLBPE/3/

Answer 2

最明顯的問題是，您不應該在腳本框中放置腳本標記。您將它設置爲onLoad，以便它將文本框中的所有內容放入onLoad函數中。

因此，請將jquery的腳本標記放在html框的頭部。然後刪除其他腳本標記。

我也把你的document.ready函數移動到了IE7的「工作」http://jsfiddle.net/pTcXB/。通過旋轉工作，IE事件中的圖像未被替換。

我敢肯定的原因是在這裏：

$(activeBefore.find('a').attr('href')).fadeOut('slow',function(){ 
    $(this).css('display','none'); 
}); 

IE7 ATLEAST是有點棘手，當涉及到的URL。它可能是特定於jQuery的，但我從來沒有寫過純JavaScript，所以我不確定。如果你添加一個像elem.append（''）那樣的鏈接href將是http://www.blablabla.bla#something。知道你可以用兩種方式解決它。或者添加鏈接，然後通過elem.attr（'href'，'#something'）設置href，或者您可以拆分哈希並從那裏構建網址。

我嘗試了第二種方法，並得到了它（通過IE9模擬器只測試IE7）工作http://jsfiddle.net/pTcXB/8/