切换div的可见性属性

Question

我在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>

我基本上只是试图在可见和隐藏的两种状态之间切换它,除非我不能使用切换,因为该显示并隐藏了div.我需要它,只是隐藏,所以它保持正确的高度.

Answer 1

使用jQuery:

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

Answer 2

我知道这是一个老问题,但我遇到它研究一个不同的问题.

根据jquery文档,调用不带参数的toggle()将切换可见性.

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

http://jsfiddle.net/Q47ya/