奇怪的fadeIn（）和fadeOut（）问题jQuery

Question

我正在创建一个向后兼容的CSS3设计的东西版本。它主要工作，但有一些问题，我希望你们能弄明白。

看看这个页面首先要了解什么我谈论：

http://bearce.me/new-home/index.htm

它的工作原理prefectly在Chrome，Firefox，Opera和Safari浏览器。我正在使用jQuery处理IE调整。

所以，正如你所看到的，当你将鼠标悬停在一列上时，其他两列会褪色成黑白色。这是通过使用四个不同的图像完成的，并将图像淡出以显示正确的图像。我遇到的问题是图像如何淡出。在IE中，当您将鼠标悬停在每列上时，图像会淡出，但首先全彩色图像会闪烁。另外，如果您快速将光标拖动到整个集合上，它会闪烁4次。我知道如何使用.stop(true,false)，并尝试过，以及.stop(true,true),.stop(false,false)和.stop(false,true)，每一个都有自己的问题，主要是只有一个图像衰落，而其他的只是突然跳起来。

我的脚本：

$("#left").hover(
    function() { 
     // fading 
     $("#slider #main").fadeOut(500); 
     $("#slider #web").fadeOut(500); 
     $("#slider #graphics").fadeOut(500); 
     // description animation 
     $("#left .more").stop(true,false).delay(150).animate({height:"120px"}, 500); 
    }, 
    function() { 
     // fading 
     $("#slider #main").fadeIn(500); 
     $("#slider #web").fadeIn(500); 
     $("#slider #graphics").fadeIn(500); 
     // description animation 
     $("#left .more").stop(true,false).delay(150).animate({height:"0px"}, 500); 
    } 
); 

$("#center").hover(
    function() { 
     // fading 
     $("#slider #main").fadeOut(500); 
     $("#slider #scripting").fadeOut(500); 
     $("#slider #web").fadeOut(500); 
     // description animation 
     $("#center .more").stop(true,false).delay(150).animate({height:"120px"}, 500); 
    }, 
    function() { 
     // fading 
     $("#slider #main").fadeIn(500); 
     $("#slider #scripting").fadeIn(500); 
     $("#slider #web").fadeIn(500); 
     // description animation 
     $("#center .more").stop(true,false).delay(150).animate({height:"0px"}, 500); 
    } 
); 

$("#right").hover(
    function() { 
     // fading 
     $("#slider #main").fadeOut(500); 
     $("#slider #scripting").fadeOut(500); 
     $("#slider #graphics").fadeOut(500); 
     // description animation 
     $("#right .more").stop(true,false).delay(150).animate({height:"120px"}, 500); 
    }, 
    function() { 
     // fading 
     $("#slider #main").fadeIn(500); 
     $("#slider #scripting").fadeIn(500); 
     $("#slider #graphics").fadeIn(500); 
     // description animation 
     $("#right .more").stop(true,false).delay(150).animate({height:"0px"}, 500); 
    } 
); 

该版本仅在CSS过渡不支持火灾，所以这就是为什么它在Chrome，Firefox，Opera和Safari浏览器的伟大工程。

另外，有没有一种很好的方法可以缩小到一个部分，而不是三个？我怀疑它，但嘿，我已经在提问了，所以不妨试试。

Answer 1

没有必要明确地编码的一切。此代码应处理所有的情况：

$('#home_nav > *').hoverIntent(function() { 
    $('#slider img').eq($(this).index()).siblings().stop(true, false).fadeOut(500); 
    $(this).find('.more').stop(true, false).animate({height: '120px'}, 500); 
}, function() { 
    $('#slider img').eq($(this).index()).siblings().stop(true, false).fadeIn(500); 
    $(this).find('.more').stop(true, false).animate({height: '0px'}, 500); 
}); 

此代码似乎是多余的，因此，如果任何人都可以提出一个方法凝结了，我会很高兴地解决我的答案。