Непрозрачность, не работающая на 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 (и ниже) не поддерживают непрозрачность, поэтому вам нужно использовать довольно неуклюжий код, предоставленный Фабианом.

Я думаю, что более простой вариант, чтобы просто делать то, что предлагает Madmartigan и использовать fadeTo JQuery в() - метод, как он будет обслуживать все современные (и не очень современные) браузеры:

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

Я также заметил, что некоторые вещи, которые могут быть улучшены в вашем коде. Использование только селекторов .class медленнее, чем предоставление имени тега, а также jQuery должен проходить через элемент EVERY и сопоставлять класс, а не только элементы 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 2

Это должно работать для 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 3

Используйте это:

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

Надеется, что это помогает.