javascript - css 用于淡化覆盖的视频控件？

Question

在某些 DVD/视频播放器中，播放/暂停/音量/等的控件覆盖在盒子中的视频本身的顶部。当您移动鼠标时控件淡入，然后在延迟一段时间后淡出（因此您可以再次欣赏视频）。

我想知道——如何使用 CSS 创建这种效果？有没有办法在鼠标移动以外的事件上重置淡出计时器？

Answer 1

假设我们有以下 HTML 模板：

<div class="player">
    <div class="controls">Controls go here</div>
</div>

如果您使用 CSS 是可能的：http transition-delay: //jsfiddle.net/teddyrised/7sBwA/

.player {
    background-color: #333;
    position: relative;
    width: 100%;
    height: 400px;
}
.controls {
    background-color: rgba(0,0,0,.5);
    border-radius: 5px;
    color: #eee;
    padding: 1em;
    position: absolute;
    left: 2em;
    right: 2em;
    bottom: 2em;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    transition-delay: 0;
}
    .player:hover .controls {
        pointer-events: auto;
        opacity: 1;
    }
    .player:not(:hover) .controls {
        transition-delay: .5s;
    }

但是，如果你想要更好的浏览器支持，你应该使用 JS 来代替。

使用 jQuery 时，您可以利用.delay()使用 jQuery 效果时的方法，例如.fadeOut()在我们的示例中：http: //jsfiddle.net/teddyrised/g7kge/

JS：

$(document).ready(function(){
    $(".player .controls").hide();
    $(".player").hover(
        function(){
            // Mouse enters. Fade in controls
            $(this).find(".controls").fadeIn();
        },
        function(){
            // Mouse leaves. Delay controls fade out by 1000ms
            $(this).find(".controls").delay(1000).fadeOut();
        });
});

Answer 2

可以使用 CSS 控制淡出计时器：

-(prefix)-transition: all <duration> ease-out <delay>;

看看这个小提琴。