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

我只需要翻译，不需要解释或改变内容：

我基本上只是试图在可见和隐藏这两种状态之间切换它，除了我不能使用toggle，因为那样会显示和隐藏div。我需要它呈现隐藏状态，以便维护正确的高度。

- tfer77

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

---

谢谢...我刚刚浪费了半个小时的时间。因为我在处理一个按钮，所以我的头脑自动想到了"onclick"。非常感谢！@tb11 - tfer77

你可以使用onclick。你只需要将切换逻辑放在showVid()函数内部就可以了。好吧，那么它将变成一个toggleVid()函数。 - tb11

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden'); 这句话的意思是：“如果 #video-over 的可见性为隐藏，则将其设置为可见，否则设置为隐藏”。 - Antti

仅供参考，可见性和显示的工作方式不同。显示适用于内部div的层次结构，而在某些情况下，可见性则不是这样。以下是关于显示的相同内容：$('#ivideo-over').css('display', $('#ivideo-over').css('display') == 'none' ? 'block' : 'none'); - Lisandro

很好的答案，但我还建议使用display属性来控制none/block选项。可见性会为div“保留”空间，根据您的UI，这可能看起来不太好。display属性将其视为不存在，因此在...它存在之前，您的UI不会受到影响。 - Tarquin

Answer 2

根据jQuery文档，调用toggle()而不带参数将切换可见性。

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

http://jsfiddle.net/Q47ya/

- timetraveler

---

请注意CSS属性“visibility”和“display”的区别。“toggle（）”更改“display”属性，这将隐藏元素并使空间“可用”供其他元素使用，而使用“visibility”时元素将继续占用空间。正如OP在最后一句话中所述，这就是为什么“toggle（）”在此处无法工作的原因。 - Mallard

根据jQuery文档，调用toggle()函数不带参数会切换可见性。但实际上并不是这样的。 可见性和显示是两个不同的概念，而toggle()函数作用于显示而非可见性。 - Abdul Rehman

如果您想操作服务器端内容，则“display:none”不是一个选项，toggle()也无法工作。 - safhac

Answer 3

有一种只使用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';
     }
}

- FatAussieFatBoy

Answer 4

为了使代码更加简洁，同时保持单行代码（就像使用toggle()一样），您可以使用三元运算符。这样，您的代码看起来像这样（还使用了jQuery）：

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

- elPastor

Answer 5

$.fn.toggleVisibility = function (state) {
    return this.each(function () {
        $(this).css("visibility", state ? "visible" :
            (state === false ? "hidden" :
                $(this).css("visibility") === "hidden" ? "visible" : "hidden"));
    });
};

那么

$('#video-over').toggleVisibility();

或者

$('#video-over').toggleVisibility(true);

或者

$('#video-over').toggleVisibility(false);

- holden321

Answer 6

如果想要实现类似于$.fadeIn()和$.fadeOut()的效果，您可以使用过渡效果。

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

- davefrassoni

Answer 7

最好这样检查可见性： if($('#video-over').is(':visible'))

- Paul Iştoan