web-dev-qa-db-ja.com

divの可視性プロパティを切り替えます

DivにHTML 5ビデオがあります。その後、カスタム再生ボタンがあります-これは正常に動作します。
ロード時に動画の可視性を非表示に設定し、再生ボタンをクリックすると表示されるようになりました。再生ボタンを再度クリックしたときに非表示に戻すにはどうすればよいですか？

function showVid() {
  document.getElementById('video-over').style.visibility = 'visible';
}
#video-over {
  visibility: hidden;
  background-color: rgba(0, 0, 0, .7)
}
<div id="video-over">
  <video class="home-banner" id="video" controls="">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
</div>

<button type="button" id="play-pause" onclick="showVid();">
      <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">
      </button>

基本的には、表示と非表示の2つの状態を切り替えようとしていますが、トグルは使用できません。私はそこにそれを必要とします、ただ隠されているので、正しい高さを維持します。

javascriptjquerycsstoggleshow-hide
40
tfer77

JQueryの使用：

$('#play-pause').click(function(){
  if ( $('#video-over').css('visibility') == 'hidden' )
    $('#video-over').css('visibility','visible');
  else
    $('#video-over').css('visibility','hidden');
});
67
tb11

これは古い質問であることは知っていますが、別の問題を調査することに出くわしました。

Jqueryのドキュメントによると、パラメーターなしでtoggle（）を呼び出すと、可視性が切り替わります。

    $('#play-pause').click(function(){
        $('#video-over').toggle();
    });

http://jsfiddle.net/Q47ya/

24
timetraveler

JavaScriptだけでこれを行う別の方法があります。必要なのは、CSSでのDIVの可視性の現在の状態に基づいて可視性を切り替えることだけです。

例：

function toggleVideo() {
     var e = document.getElementById('video-over');

     if(e.style.visibility == 'visible') {
          e.style.visibility = 'hidden';
     } else if(e.style.visibility == 'hidden') {
          e.style.visibility = 'visible';
     }
}
2
FatAussieFatBoy

$ .fadeIn（）や$ .fadeOut（）のような効果でそれを行うには、トランジションを使用できます

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}
0
davefrassoni

これを少しクリーンアップし、コードの1行を維持するには（toggle()を使用する場合と同様）、 三項演算子 を使用して、コードが次のようになります。 （jQueryも使用）：

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');
0
elPastor