切换 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。我需要它在那里，只是隐藏起来，所以它保持正确的高度。

原文由 tfer77 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 jQuery：

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

原文由 tb11 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

根据 jQuery 文档，在没有参数的情况下调用 toggle() 将切换可见性。

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

http://jsfiddle.net/Q47ya/

原文由 timetraveler 发布，翻译遵循 CC BY-SA 4.0 许可协议