Question

我有一个简单的jQuery图像更换器，当你将鼠标悬停在它上面时，将使用灰色版本交换所有图像，除了你所使用的图像，一个将保持颜色（它们都是开始的颜色）和当你将鼠标悬停在另一个图像上，最后一个图像变为灰色，新图像变为彩色。

然而，在IE浏览器中，当你将鼠标悬停在图像上时，因为它正在改变src，IE会在完成预期之前的瞬间显示彩色版本。

以下是代码：

$(window).load(function() {

//when mouse over the list item...
$('#portfolio ul li').hover(function(){

  $(this).find('img').addClass('active');
$(this).siblings().each(function(Idx){
    var imgSrc = ""+$(this).find('img').attr('src');
    var imgGS = ""+$(this).find('a').attr('rel');

    $(this).find('img').attr('src', imgGS);
    $(this).find('a').attr('rel', imgSrc);


    //alert (imgSrc + " " + imgGS);
});
  //when mouse leave...
}, function(){

 $(this).find('img').removeClass('active');
$(this).siblings().each(function(Idx){
    var imgGS = $(this).find('img').attr('src');
    var imgSrc = $(this).find('a').attr('rel');

    $(this).find('a').attr('rel',imgGS);
    $(this).find('img').attr('src', imgSrc);

    //alert (imgSrc + " " + imgGS);
});
});

//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){

$(this).siblings().each(function(Idx){
    var imgSrc = $(this).find('img').attr('src');
    var imgGS = $(this).find('a').attr('rel');

    $(this).find('img').attr('src', imgSrc);
    $(this).find('a').attr('rel',imgGS);

    // alert (imgSrc + " " + imgGS);
});

  });

});

任何帮助将不胜感激：）

感谢。

Answer 1

尝试使用图像精灵。这包括将灰色和彩色放在同一图像中，然后只需更改图像的哪一部分即可更改源。解决了浏览器必须动态加载图像的问题，因为它们已经加载了。

Answer 2

您可以将彩色图像显示为常规<img>，然后灰色版本为css background。在悬停时，淡化它的兄弟姐妹img's out。

像

这样的东西

$('.yourList li').hover(function() {
    $(this).siblings().find('img').hide();
},function() {
    $(this).siblings().find('img').show();
});

请确保您要么让内容保持li不会崩溃，要么手动设置尺寸。

Answer 3

支持符合标准的浏览器的pix和IE的css过滤器应该可以解决问题。不需要多个图像

http://www.pixastic.com/lib/download/

我如何处理重新加载这些图像？

3 个答案: