jQuery悬停效果使用IE不支持的不透明度

Question

以下是我在此页面上使用的代码:此处

$(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

IE不能很好地支持CSS不透明度.使用以下方法在IE中使不透明度工作:

此代码允许您(例如)使用类设置所有图像:foo使用不透明度:50.

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

您可以尝试初始化元素,visibility:hidden;然后使其可见并在激活时淡出.jQuery淡入淡出效果将与支持它的浏览器一起使用,如果没有正确支持淡入淡出则只显示该元素.

另外,您可能想要考虑每个元素只运行一次bling,这将加速jQuery处理:例如:

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

ID选择总是最快的,其次是标签名称(a,ul,div).CSS类选择较慢.