jQuery圖片幻燈片：標題在IE中不透明

Question

我用jQuery創建了一個圖片幻燈片。圖像彼此之間淡化。每張圖片都有標題，每張圖片都有自己的div。隨着相關標題中的圖像逐漸淡化。標題的目的是透明的，這在所有的瀏覽器（我已經測試過）除IE外都可以使用。

該網站可以在http://mtsoc.enfotext.com

的JavaScript（用於幻燈片之一）被發現的是：

function slideShow() { 

    //Set the opacity of all images to 0 
    $('#mainfeature a').css({ 
     opacity: 0.0 
    }); 

    //Get the first image and display it (set it to full opacity) 
    $('#mainfeature a:first').css({ 
     opacity: 1.0 
    }); 

    //Set the caption background to semi-transparent 
    $('#mainfeature .caption').css({ 
     opacity: 0.7 
    }); 

    //Call the gallery function to run the slideshow 
    setInterval('main_gallery()', 8000); 
} 


function main_gallery() { 

    //if no IMGs have the show class, grab the first image 
    var current = ($('#mainfeature a.show') ? $('#mainfeature a.show') : $('#mainfeature a:first')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#mainfeature a:first') : current.next()) : $('#mainfeature a:first')); 

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

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

    //Set the opacity to 0 and height to 1px 
    $('#mainfeature .caption').animate({ 
     opacity: 0.0 
    }, { 
     queue: false, 
     duration: 0 
    }).animate({ 
     height: '1px' 
    }, { 
     queue: true, 
     duration: 300 
    }); 

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect 
    $('#mainfeature .caption').animate({ 
     opacity: 0.7 
    }, 100).animate({ 
     height: '50px' 
    }, 500); 
} 

的CSS是：

#mainfeature.feature { 
    color: #fff; 
    display: block; 
    position: absolute; 
    overflow: hidden; 
    z-index: 1; 
} 

#mainfeature.caption { 
    background: #333; 
    padding: 10px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    z-index: 600; 
    height: 50px; 
    opacity: 0.7; 
    filter: alpha(opacity = 70); 
    width: 575px; 
} 

的HTML是：

<div id="mainfeature"> 
    <a href="#" class="show feature"> 
     <img src="<?php bloginfo('template_directory'); ?>/images/12.jpg" /> 
     <div class="caption"> 
      <span class="tag">Spring Show</span> 
      <span class="title">A Funny Thing Happened on the Way to the Forum</span> 
      <span class="detail">Through June 15</span> 
     </div> 
    </a> 
... more slides... 
</div> 

無論如何，很長的問題，很多的信息。有誰知道爲什麼標題在IE中不透明嗎？

謝謝

Answer 1

IE沒有實現過濾CSS屬性。你需要使用類似filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 0）;在IE中透明。或者，您可以使用PNG背景圖像並使用JS應用透明度。那裏有很多選擇。

Answer 2

似乎問題是嵌套的不透明度設置。

如果您瀏覽與開發工具欄上的DOM，你可以通過刪除

filter:alpha(opacity=100) 

從a.feature標籤

獲得適當的外觀（必須做的，而錨可見）。

有幾件事你可以做。如果你必須有整個錨淡入和淡出比你可以在這消除透明度樣式

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

而且底部添加一條線，你不妨考慮使用淡入/淡出功能，因爲這些設計在一定範圍內正確應用不透明度。

Answer 3

在jQuery中設置不透明度的體面的跨瀏覽器方法是使用.fadeIn/.fadeOut/.fadeTo。

我意識到這些是用於動畫不透明度設置，但您可以更改時間以適應您的要求。闡述的其他答案更加健壯，但需要多一點維護。

希望有所幫助。

Answer 4

我發現如果我隱藏了一個具有透明css規則的類的元素，當我再次顯示該元素時，我（當然只有IE）重新建立了過濾器css規則。

這爲我工作：

$(".selected").find(".overlay").css("filter", "alpha(opacity=80)").fadeIn(500);