jquery - 要素上のfadeOut/fadeIn画像

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');
        }
    );

chromedev-toolsでテストしました-うまくいくはずです。

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");
});