Comment changer l'opacité d'une image dans IE? - jQuery, CSS

Question

Les travaux suivants en FF, Chrome et Safari:

$('#delete_img').click(function(e) { 
      var offset = $(this).offset(); 
      $(this).parent().parent().fadeTo("slow", 0.30); 
      $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' }); 
      e.stopPropagation(); 
}); 

Mais ne pas IE8 (je ne suis pas tester même dans 7 et versions antérieures).

Comment puis-je obtenir cette fonctionnalité dans IE8?

Modifier: le code HTML ici A la demande:

<div id="slider-code"> 
     <a class="buttons prev" href="#"></a> 
     <div class="viewport"> 
      <ul class="overview">   
       <li><img src="images/red-stripe.jpg" /></li> 
       <li><img src="images/red-stripe-bw.jpg" /></li> 
       <li><img src="images/red-stripe-red.jpg" /></li>    
       <li><img src="images/red-stripe-dark.jpg" /></li> 
       <li><img src="images/red-stripe.jpg" /></li> 
       <li><img src="images/red-stripe-red.jpg" /></li> 
       <li><img src="images/red-stripe-dark.jpg" /></li>   
      </ul>  
     </div> 
     <a class="buttons next" href="#"></a> 
    </div> 

    <div style="clear:both"></div> 

    <div id="edit-image-nav"> 
     <div id="add_comment"><img src="images/comment-icon.png" /></div> 
     <div id="like"><img src="images/paint-icon.png" /></div> 
     <div id="delete_img"><img src="images/delete-icon.png" /></div> 
    </div> 

S'il vous plaît noter que ce qui se passe est, lorsque vous cliquez sur l'une des icônes de la « modifier l'image-nav » div (qui sont superposés sur les images dans l'UL ci-dessus onHover), il a des fonctionnalités différentes. Pour les autres icônes, cela fonctionne. Pour le #delete_img cependant, ce n'est pas le cas.

Answer 1

Il ne semble être une erreur dans votre code, mais si cela ne fonctionne vraiment pas, essayez ceci:

$('#delete_img').click(function(e) { 
      var offset = $(this).offset(); 
      $(this).parent().parent().parent().children("img").fadeTo("slow", 0.30, function() { 
        $(this).css('opacity', 0.3); 
      }); 
      $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' }); 
      e.stopPropagation(); 
});

Answer 2

image ne peut pas être un parent (bien, il est très peu susceptible d'être) si votre sélecteur est faux. Il est difficile de dire ce qu'il devrait être sans code HTML pertinent, mais vous pouvez essayer (cela fonctionnera si votre bouton de suppression est deux niveaux vers le bas de la cible à supprimer):

$(this).parent().parent().find("img").fadeTo("slow", 0.30); 

La méthode fadeTo sur l'image fonctionne très bien avec IE8. Si cela ne fonctionne pas, envoyez votre code HTML.

Sinon, assurez-vous que votre balise img a une hauteur et une largeur spécifiées sinon IE n'appliquera pas de changement d'opacité à l'élément car il "n'a pas de disposition" - pour des explications détaillées, voir http://www.satzansatz.de/cssd/onhavinglayout.html.