jQuery Image Slideshow: Untertitel nicht transparent in IE

Question

Ich habe eine Diashow von Bildern mit jQuery erstellt. Die Bilder verblassen zwischeneinander. Es gibt Bildunterschriften für jedes Bild, jedes in seinem eigenen div. Wenn das Bild eingeblendet wird, wird die entsprechende Beschriftung nach oben verschoben. Die Beschriftung soll transparent sein und das funktioniert in allen Browsern (mit denen ich es getestet habe) außer IE.

kann die Website unter http://mtsoc.enfotext.com

Die Javascript (für eine der Show) ist zu finden:

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

Die CSS ist:

#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; 
} 

Die HTML ist:

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

Wie auch immer, lange Frage, viele Informationen. Hat jemand eine Idee, warum die Untertitel im IE nicht transparent sind?

Dank

Answer 1

IE implementiert nicht die Filter CSS-Eigenschaft. Sie müssen etwas wie filter verwenden: progid: DXImageTransform.Microsoft.Alpha (Opazität = 0); für Transparenz in IE. Alternativ können Sie ein PNG-Hintergrundbild verwenden und JS verwenden, um Transparenz anzuwenden. Viele Möglichkeiten da draußen.

Answer 2

Scheint das Problem ist die verschachtelte Deckkrafteinstellungen.

Wenn Sie das dom mit der Dev-Symbolleiste sehen, können Sie den richtigen Look erzielen, indem die

filter:alpha(opacity=100) 

vom a.feature-Tag zu entfernen (muss getan werden, während der Anker sichtbar ist).

Es gibt ein paar Dinge, die Sie tun könnten. Wenn Sie den gesamten Anker Ein- und Ausblendung haben, als Sie eine Zeile am unteren Rand hinzufügen können, die die Opazität Stil

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

auch entfernt, können Sie möchten die fadeIn/fadeOut Funktionen prüfen, mit wie diese ausgelegt sind, um Trübungen über einen Bereich richtig anzuwenden.

Answer 3

Eine ordentliche Quer Browser Methode der Opazität in jQuery Einstellung ist das .fadeIn/.fadeOut/.fadeTo zu verwenden.

Mir ist klar, dass diese für animierte Opazität Einstellung gemeint ist, aber Sie können das Timing ändern, um Ihre Anforderungen gerecht zu werden. Die anderen Antworten sind robuster, erfordern aber etwas mehr Wartung.

Hoffe, dass hilft.

Answer 4

Ich fand, dass wenn ich ein Element, das eine Klasse mit Transparenz CSS-Regeln hatte, hatte ich (für IE nur natürlich) die Filter CSS-Regel wiederherzustellen, wenn ich das Element erneut zeigte.

Das ist für mich gearbeitet:

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