jquery - 元素上的淡出/淡入图像

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 dev-tools 对其进行了测试——应该可以很好地工作。

Answer 2

如果您需要使用 opacity 而不是 fadeOut，请在动画之后使用回调函数：

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