淡出/淡入圖像在元素

Question

我現在有一個像一個div覆蓋，我目前使用下面的代碼淡出的圖像顯示在下方的元素中的文本：

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

但是因爲我只是在使得它無形的我不能得到的鏈接下工作，你可以看到一個樣本在這裏http://playing.everythingcreative.co.uk

如果我使用淡出方法，然後它不會淡入懸停......

Answer 1

什麼有關：

$(".Content_Frame_Container") 
    .each(function(){ 
     $(this).find('.Content_Frame_Image'); 
    }) 
    .hover( 
     function(){ 
      $(this).find('.Content_Frame_Image').stop().fadeOut('slow'); 
     }, 
     function(){ 
      $(this).find('.Content_Frame_Image').stop().fadeIn('slow'); 
     } 
    ); 

用chrome開發工具測試它 - 應該很好地工作。

Answer 2

如果您需要使用不透明的，而不是淡出，你的動畫後的回調函數：

$(".Content_Frame_Image").hover(
function() { 
    $(this).stop().animate({"opacity": "0"}, "slow", function() { 
     //move the element off-screen 
     $(this).css({ 
      'position' : 'absolute', 
      'left' : '-9999px' 
     }); 
    }); 
}, 
function() { 
    //move it back first 
    $(this).css({ 
     'position' : 'absolute', 
     'left' : '0' 
    }); 
    $(this).stop().animate({"opacity": "1"}, "slow"); 
});