JQuery парения эффект использует прозрачность, что IE не поддерживает

Question

Ниже мой код для использования на этой странице: here

$(document).ready(function(){ 
$('.jcarousel-skin-tango a').hover(
     function() { 
      $(this).find('.rollover').stop().fadeTo(500, 1); 

     }, 
     function() { 
      $(this).find('.rollover').stop().fadeTo(500, 0); 

     } 
    ) 
}); 

Проблема заключается в IE 8 и ниже. Когда вы наводите курсор на любой из слайд-изображений, зависание становится черным (потому что IE не поддерживает «непрозрачность»). Мне в основном нужен новый способ написания этого, так что тот же эффект достигается без появления серого/черного ящика в IE. Есть идеи ?

Answer 1

Я думаю, что вы используете прозрачные изображения png. это не проблема непрозрачности. вы должны использовать альфа-загрузчик изображений, т. е. он будет работать. если изображение устанавливаются в качестве фона с помощью CSS, хак будет ниже

.rollover { 
    background: url(/image_path.png) no-repeat 0 0; 
    /* IE hack, targets ie only */ 
    background:none\9; /* Targets IE only */ 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/image_path.png", sizingMethod="crop"); 
} 

или вы можете использовать яваскрипт решения для pngfix на лета с JavaScript, http://www.dillerdesign.com/experiment/DD_belatedPNG/

DD_belatedPNG.fixPng('.rollover'); 

Answer 2

IE не очень хорошо поддерживает непрозрачность CSS. Используйте следующие чтобы непрозрачности работы в IE:

Этот код позволяет (например) установить все изображения с классом: foo использовать непрозрачности: 50.

$('img.foo').css("-ms-filter", "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"); 

Вы можете попробовать инициализировать элемент с visibility:hidden;, а затем сделать его видимым и исчезать, когда он активирован. Эффект затухания jQuery будет работать с браузером, который его поддерживает, и просто отображать элемент, если затухание не поддерживается должным образом.

Кроме того, вы можете рассмотреть только работает шику один раз для каждого элемента, это ускорит обработку JQuery: например:

var $el = $(this); 
var $rollover = $el.find('.rollover'), 
    $captions = $el.find('.captions'); 

ID выбора всегда быстро, а затем имена тегов (а, ул , div). Выбор класса CSS медленнее.

Answer 3

AFAIK, не существует способа справиться с проблемой IE, по крайней мере, не в вашем случае. Internet Explorer не очень хорошо работает с изменениями прозрачности javascript/jQuery (альфа-смешивание в целом, функция show(); включена функция), особенно при использовании (полу) прозрачных изображений. IE не может улавливать затухание альфа-смешанного элемента.

Мое предложение: используйте функции slideDown/slideUp/other или .animate для свойств элемента, чтобы получить самый близкий эффект без использования альфа-смешивания.

удачи.

Answer 4

Вы используете полупрозрачный PNG? Это еще больше усложняет ситуацию. Я изменил бы это на gif для значка + и только фона цвета для «коробки», которая исчезает и исчезает. Попробуйте это сначала, а затем попытайтесь решить это с помощью PNG позже. У меня была такая же проблема, но ее легче решить, если по ней шаг за шагом.

Answer 5

Речь не идет о прозрачной PNGs. У меня была аналогичная проблема. Просто установите цвет фона на элементе прямо перед переходом (и вы можете сразу удалить его).

$(document).ready(function(){ 
$('.jcarousel-skin-tango a').hover(
     function() { 
      $(this).find('.rollover').stop().addClass('transition').fadeIn(500, function(){ 
        $(this).removeClass('transition'); 
      }); 
     }, 
     function() { 
      $(this).find('.rollover').stop().addClass('transition').fadeOut(500, function(){ 
        $(this).removeClass('transition'); 
      }); 
     } 
    ) 
}); 

На таблице стилей:

.transition { background-color: #b1ab1a /* the nearest color of the parent background */