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

Answer 2

您是否尝试过hover函数而不是mouseenter / mouseleave？

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

你没有说它在什么时候闪烁（加载/鼠标悬停）？所以我猜这里是关于鼠标的。

无论哪种方式，它都可以通过两种功能完成您目前正在做的事情：）

Answer 3

试试这个

    $( ".overlay" ).mouseover(function() {
$('.Image-Overlay').fadeIn('slow');
}).mouseleave(function () {
    $('.Image-Overlay').fadeOut('fast');
});

Answer 4

我不知道这是你正在寻找/说的，但是如果你快速重复mouseenter / mouseleave动作，那么fadein / fadeout会触发很多时间，它会像地狱一样闪烁。我建议你考虑使用stop函数来防止这种情况发生

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

Answer 5

我会使用CSS动画来达到此效果。

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

 // you can change bottom with anything else with a numeric value
 // animate out time
 transition: bottom 500ms ease-out;
 -webkit-transition: bottom 500ms ease-out;
}

.overlay:hover .Image-Overlay{
 bottom: 0;

 // animate in time
 transition: bottom 200ms ease-out;
 -webkit-transition: bottom 200ms ease-out;
}

这看起来像这样：http://jsfiddle.net/Lwrj6y31/1/

jQuery覆盖闪烁

5 个答案: