javascript - 用于淡化叠加视频控件的CSS？

Question

在某些 DVD/视频播放器中，播放/暂停/音量等控件覆盖在视频本身的顶部。控件会在您移动鼠标时淡入，然后在延迟一段时间后淡出(这样您就可以再次欣赏视频)。

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

Answer 1

假设我们有以下 HTML 模板:

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

如果你使用 CSS transition-delay 是可能的:http://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 时，您可以在使用 jQuery 效果时利用 .delay() 方法，例如我们示例中的 .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();
        });
});