奇怪的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); 
}); 

此代碼似乎是多餘的，因此，如果任何人都可以提出一個方法凝結了，我會很高興地解決我的答案。