jquery - 不透明度在 IE8 上不起作用

Question

这会在 Firefox/Chrome 中很好地淡化图层 - 但在 IE8 中不会使图层变得不透明。

$('document').ready(function () {
  $('.out-of-stock').each(function () {
    $('.productImage', $(this)).css('opacity', '.25');
    $('.stockMessage', $(this)).removeClass('stockMessageOff');
    $('.stockMessage', $(this)).addClass('stockMessageOn');
    $('.stockMessage.stockMessageOn', $(this)).css('opacity', '1').text('Sold Out');
  });
});

我读过几篇关于分配缩放的 stackoverflow 帖子:1;到 css 类，但这并没有解决它。

有人有什么想法吗？ :)

Answer 1

如本页所述:http://www.quirksmode.org/css/opacity.html IE8(及更低版本)不支持不透明度，因此您必须使用 Fabian 提供的相当笨重的代码。

我认为一个更简单的选择是简单地按照 Madmartigan 的建议进行操作并使用 jQuery 的 fadeTo() 方法，因为它将满足所有现代(以及不太现代)浏览器的需求:

$('.productImage').fadeTo(0, .25);

我还注意到您的代码中有一些可以改进的地方。仅使用 .class 选择器比提供标签名称慢，而且 jQuery 必须遍历每个元素并匹配类，而不仅仅是 img(例如)元素。您也没有利用 jQuery 链接方法调用的能力，这不仅加快了速度，而且使代码更整洁:

$(function () {
  $('div.out-of-stock').each(function () {
    $('img.productImage', this).css('opacity', '.25');

    $('p.stockMessage', this).removeClass('stockMessageOff').addClass('stockMessageOn').css('opacity', '1').text('Sold Out');
  });
});

只是一个提示! :)