jQuery 切换 div 的可见性属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18050761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle visibility property of div
提问by tfer77
I have an HTML 5 video in a div. I then have a custom play button - that works fine.
And I have the video's visibility set to hidden on load and visible when the play button is clicked, how do I return it to hidden when the play button is clicked again?
我在一个 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>I'm basically just trying to toggle it between the two states of visible and hidden except I can't use toggle because that show's and hides the div. I need it there, just hidden, so it maintains the correct height.
我基本上只是试图在可见和隐藏两种状态之间切换它，除非我不能使用切换，因为该显示并隐藏了 div。我需要它，只是隐藏，所以它保持正确的高度。
回答by tb11
Using jQuery:
使用jQuery：
$('#play-pause').click(function(){
if ( $('#video-over').css('visibility') == 'hidden' )
$('#video-over').css('visibility','visible');
else
$('#video-over').css('visibility','hidden');
});
回答by timetraveler
I know this is an old question but I came across it researching a different problem.
我知道这是一个老问题，但我在研究另一个问题时遇到了它。
According to the jquery docs calling toggle() without parameters will toggle visibility.
根据 jquery docs 不带参数调用 toggle() 将切换可见性。
$('#play-pause').click(function(){
$('#video-over').toggle();
});
回答by FatAussieFatBoy
There is another way of doing this with just JavaScript. All you have to do is toggle the visibility based on the current state of the DIV's visibility in CSS.
还有另一种方法可以只用 JavaScript 做到这一点。您所要做的就是根据 CSS 中 DIV 可见性的当前状态切换可见性。
Example:
例子：
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';
}
}
回答by elPastor
To clean this up a little bit and maintain a single line of code (like you would with a toggle()), you can use a ternary operatorso your code winds up looking like this (also using jQuery):
为了稍微清理一下并维护一行代码（就像使用toggle()），您可以使用三元运算符，这样您的代码最终看起来像这样（也使用 jQuery）：
$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');
回答by davefrassoni
To do it with an effect like with $.fadeIn() and $.fadeOut() you can use transitions
要使用 $.fadeIn() 和 $.fadeOut() 之类的效果，您可以使用过渡
.visible {
visibility: visible;
opacity: 1;
transition: opacity 1s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
