jQuery 叠加闪烁

Question

我遇到了一个图像覆盖的问题，它闪烁然后消失，我假设它与 css 加载覆盖然后 jQuery 触发有关？

.Image-Overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.8);
    z-index: 100;
    display: none;
    position: absolute;
    top: 0;
    cursor: pointer; 
    color: #fff;
    box-sizing: border-box;  
    padding: 20px;
}

<div class="column xsmall-12 small-6 medium-3 overlay">
    <img src="<?php echo get_template_directory_uri(); ?>
    /img/insidePages/Layer90.jpg" alt="Kenya" />
    <div class="Image-Overlay">
        <p>content on overlay</p>
    </div>
    <h2>Title</h2>
</div>

$('.overlay').mouseenter(function () {
    $('.Image-Overlay', this).fadeIn('slow');
}).mouseleave(function () {
    $('.Image-Overlay', this).fadeOut('fast');
});

真的，我想要它在悬停时向上滑动叠加层，但我查看了 jQuery 网站并且效果不起作用，关于我哪里出错的任何提示？

Answer 1

你在找这样的东西吗:

Fiddle

$('.overlay').mouseenter(function () {
    $('.Image-Overlay', this).slideDown('fast');
}).mouseleave(function () {
    $('.Image-Overlay', this).slideUp('fast');
});