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

这适用于IE8

$('.productImage', $(this)).css('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=25)');

对于跨浏览器支持，请尝试使用：

$('.productImage', $(this)).css({'-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)','filter':'alpha(opacity=25)','-moz-opacity':'0.25','-khtml-opacity':'0.25','opacity':'0.25'});

Answer 2

正如本页所述：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');
  });
});

只是小费！：）

Answer 3

使用此：

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

希望它有所帮助。

不透明度不适用于IE8

3 个答案: