jquery - 将淡入淡出切换到上滑

Question

在下面的代码中，我试图让 div 在悬停时向上滑动到位，然后在鼠标离开后淡出。最简单的方法是什么？

$(window).load(function(){  
        $('div.description').each(function(){  
        $(this).css('opacity', 0);  
        $(this).css('width', $(this).siblings('img').width());  
        $(this).parent().css('width', $(this).siblings('img').width());  
        $(this).css('display', 'block');  
    });  

    $('div.wrapper').hover(function(){    
        $(this).children('.description').stop().fadeTo(700, 0.8);  
    },function(){  
        $(this).children('.description').stop().fadeTo(700, 0);  
    });  

});

Answer 1

$('div.wrapper').mouseenter(function(){    
    $(this).children('.description').stop().fadeTo(700, 0.8);  
}).mouseleave(function(){  
    $(this).children('.description').stop().slideUp(700);  
});

相当简单。不能保证代码会起作用，但它有正确的想法。您应该使用 mouseenter 和 mouseleave，因为它不会在您每次更改包装器 div 中的元素时触发。它会跟踪鼠标何时进入 div 的范围，然后很好地离开它们。

我不记得这是否会成为一个问题，但我相信不会。如果你的 div 是height:0afterslideUp()你可能必须slideDown(0)then hide()before fadeTo()。