Question

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

$(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的范围，然后非常好地离开它们。

我不记得这是否会成为一个问题，但我不相信。如果您的height:0之后的div为slideUp()，则slideDown(0)之前可能需要hide()然后fadeTo()。

将fadeto切换为幻灯片

1 个答案: