jQuery Image Diaporama: légendes non transparentes dans IE

Question

J'ai créé un diaporama d'images en utilisant jQuery. Les images s'estompent entre elles. Il y a des légendes pour chaque image, chacune dans son propre div. Lorsque l'image est décolorée dans la légende correspondante, elle glisse vers le haut. La légende est censée être transparente et cela fonctionne dans tous les navigateurs (que j'ai testé avec) sauf IE.

Le site se trouve à http://mtsoc.enfotext.com

Le javascript (pour l'un des diaporamas) est:

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

Le css est:

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

Le code HTML est:

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

En tout cas, longue question, beaucoup d'informations. Est-ce que quelqu'un a une idée pourquoi les légendes ne sont pas transparentes dans IE?

Merci

Answer 1

IE n'implémente pas la propriété CSS du filtre. Vous devrez utiliser quelque chose comme filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 0); pour la transparence dans IE. Vous pouvez également utiliser une image d'arrière-plan PNG et utiliser JS pour appliquer la transparence. Beaucoup d'options disponibles.

Answer 2

Semble que le problème réside dans les paramètres d'opacité imbriqués.

Si vous parcourez le Royaume avec la barre d'outils Dev, vous pouvez obtenir le look approprié en enlevant le

filter:alpha(opacity=100) 

de la balise a.feature (doit être fait pendant que l'ancre est visible).

Il y a plusieurs choses que vous pourriez faire. Si vous devez avoir l'ensemble fondu d'ancrage dans et hors que vous pouvez ajouter une ligne au fond qui supprime le style d'opacité

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

, vous pouvez également envisager d'utiliser les fonctions fadeIn/fadeOut que ceux-ci sont conçus pour appliquer correctement les opacités sur une gamme.

Answer 3

Une méthode d'ombrage décent pour paramétrer l'opacité dans jQuery consiste à utiliser .fadeIn/.fadeOut/.fadeTo. Je réalise que ceux-ci sont destinés à un réglage d'opacité animée, mais vous pouvez changer la synchronisation selon vos besoins. Les autres réponses proposées sont plus robustes, mais nécessitent un peu plus de maintenance.

Espérons que ça aide.

Answer 4

J'ai trouvé que si je cachais un élément qui avait une classe avec des règles de transparence css, je devais (pour IE seulement bien sûr) rétablir la règle css de filtre quand je montrais à nouveau l'élément.

Cela a fonctionné pour moi:

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