使用javascript旋轉文本 - 在IE8中不工作

Question

我正在建立自舉並具有一個標題區域，可在左側旋轉文本並利用引導程序的傳送帶旋轉右側的圖像。文本只是幾個字的副本，主要字是較大的和腳本，在它下面有幾個字以不同的類型。我正在使用的JavaScript旋轉第一個大字，因爲它應該，但將其他單詞堆疊在一起。在大多數瀏覽器中一切正常，但IE8給我這個問題。

任何人都可以看我的代碼，並給我任何幫助解決這個問題嗎？

這是我的html：

<div class="rotator"> 
    <ul> 
     <li class="show"> 

     <p class="script">Discover<br/><br/> 
     <span class="captionwhite">the many uses<br/>of glass block</span></p> 
     </li> 

     <li class="show"> 

     <p class="script">Create<br/><br/> 
     <span class="captionwhite">a beautiful<br/>shower enclosure</span></p> 
     </li> 

     <li class="show"> 

      <p class="script">Illuminate<br/><br/> 
      <span class="captionwhite"> your bathroom<br/>naturally</span></p> 
     </li> 
    </ul> 
    </div> 

這是我的CSS：

/* rotator in-page placement */ 
    div.rotator {  
    position:relative; 

} 
/* rotator css */ 
    div.rotator ul li { 
    position:absolute; 
    list-style: none; 
} 

這是JavaScript：

function theRotator() { 
    //Set the opacity of all images to 0 
    $('div.rotator ul li').css({opacity: 0.0}); 

    //Get the first image and display it (gets set to full opacity) 
    $('div.rotator ul li:first').css({opacity: 1.0}); 

    //Call the rotator function to run the slideshow, 3000 = change to next image after 3 seconds 

    setInterval('rotate()',3000); 

} 

function rotate() { 
    //Get the first image 
    var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first')); 

    if (current.length == 0) current = $('div.rotator ul li:first'); 

    //Get next image, when it reaches the end, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first')); 

    //Un-comment the 3 lines below to get the images in random order 

    //var sibs = current.siblings(); 
    //var rndNum = Math.floor(Math.random() * sibs.length); 
    //var next = $(sibs[ rndNum ]); 


    //Set the fade in effect for the next image, the show class has higher z-index 
    next.css({opacity: 0.0}) 
    .addClass('show') 
    .animate({opacity: 1.0}, 3000); 

    //Hide the current image 
    current.animate({opacity: 0.0}, 3000) 
    .removeClass('show'); 

}; 



$(document).ready(function() {  
    //Load the slideshow 
    theRotator(); 
    $('div.rotator').fadeIn(3000); 
    $('div.rotator ul li').fadeIn(3000); // tweek for IE 
}); 

任何幫助，將不勝感激！

Answer 1

從我的評論：

的CSS opacity規則是not supported in IE8。您必須使用專有的Microsoft filter rule（這隻適用於IE瀏覽器）。或者，更簡單的方法是使用jQuery的.hide（）或設置CSS規則顯示：none ;.

再看一遍你的代碼後，你最好的選擇可能是使用一些jQuery的內置函數。根據您在opacity設置中所做的操作，您需要將大部分opacity用法（通過使用.css()或.animate()）替換爲幾個jQuery選項之一。

對於.css({opacity: 0.0})（立即隱藏的東西），你應該使用.hide()：

myElement.hide(); 

對於.css({opacity: 1.0})（隨即顯示的東西），你應該使用.show()：

myElement.show(); 

爲了您的來電.animate()使用opacity（顯示或隱藏緩慢），您應該改用.fadeIn()和.fadeOut()。您似乎已經在您的JS代碼底部使用.fadeIn()來進行IE調整。您可以使用.animate({opacity: 1.0}, 3000)相同的方式使用它，只需使用.fadeIn(3000)。 .fadeOut(3000)代替.animate({opacity: 0.0}, 3000)也是如此。如果您在整個持續時間內沒有明確傳遞數字，則默認持續時間在.fadeIn()，.fadeOut()和.animate()上均相同，全部位於400。

jQuery函數鏈接到jQuery API文檔，您可以找到完整的用法文檔以及這些頁面中的示例。

如果您在使用IE8時遇到問題.fadeIn()或.fadeOut(),this question可能會有所幫助。