1

一部の DVD/ビデオ プレーヤーでは、ボックス内のビデオ自体の上に、再生/一時停止/音量などのコントロールがオーバーレイされています。マウスを動かすとコントロールがフェードインし、少し遅れてフェードアウトします (ビデオを再び楽しむことができます)。

CSS を使用してこの効果を作成する方法は? ボディ マウスの移動以外のイベントでフェードアウト タイマーをリセットする方法はありますか?

4

2 に答える 2

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 を使用する必要があります。

.delay()jQuery を使用する場合、次の例のように 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();
        });
});
于 2013-04-26T15:14:54.150 に答える
0

CSS を使用してフェードアウト タイマーを制御するには、次のようにします。

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

このフィドルを見てください。

于 2013-04-26T14:46:00.540 に答える