切换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/

Answer 3

还有另一种方法是使用JavaScript来实现这一点。您所要做的就是根据DIV在CSS中的可见性的当前状态切换可见性。

例：

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';
     }
}

Answer 4

要稍微清理一下并维护一行代码（就像你使用toggle()一样），你可以使用ternary operator，这样你的代码就像这样（也使用jQuery）：

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

Answer 5

要使用$ .fadeIn（）和$ .fadeOut（）之类的效果来执行此操作，您可以使用过渡

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