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);