圖片和文字描述之間的淡入淡出

Question

我寫了這部分代碼在兩張圖片之間淡入淡出。 下面還有一些描述，我希望文本會改變顏色，當鼠標懸停在框中時，圖片也會淡入第二個。

不幸的是我有文字顏色變化和圖片淡入淡出的問題，如果鼠標在框上文本更改顏色，但圖片不褪色到第二個。

這是我使用的PIC褪色：

$("img.grey").hover(
    function() { 
    $(this).stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { 
    $(this).stop().animate({"opacity": "1"}, "slow"); 
}); 

任何提示？

這裏是小提琴：http://jsfiddle.net/IronFeast/BGKFN/26/

Answer 1

做鏈接的懸停圖像變化，而不是圖像：

$(".box a").hover(
function() { 
    $(this).find("img.grey").stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
    $(this).find("img.grey").stop().animate({"opacity": "1"}, "slow"); 
}); 

http://jsfiddle.net/BGKFN/28/

編輯
或者只是想：http://jsfiddle.net/BGKFN/30/

$(".box a").hover(function(e) { 
    $(this).find("img.grey").stop().animate({opacity: e.type=="mouseenter"?0:1}, 800); 
}); 

其中jQuery的hover是mouseenter mouseleave的簡寫，
這意味着，如果我們當前e事件我們得到兩個中的一個，並使用ternary operator (? :)我們正在設置不透明度靶向0如果屬實（是的mouseenter）如果爲false（如果是mouseleave）則返回1。