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

此外，您可能希望考虑使用fadeIn / fadeOut函数，因为它们旨在在范围内正确应用不透明度。

Answer 3

在jQuery中设置不透明度的一个不错的跨浏览器方法是使用.fadeIn / .fadeOut / .fadeTo。

我意识到这些是用于动画不透明度设置，但您可以更改时间以满足您的要求。提出的其他答案更加健全，但需要更多维护。

希望有所帮助。

Answer 4

我发现如果我隐藏了一个具有透明度css规则的类的元素，当我再次显示该元素时，我（当然只为IE）重新建立了过滤器css规则。

这对我有用：

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

jQuery Image幻灯片：IE中的标题不透明

4 个答案: