切换div的可见性属性 [英] Toggle visibility property of div
本文介绍了切换div的可见性属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在div中有一个HTML 5视频。然后我有一个自定义播放按钮 - 工作正常。
我将视频的可见性设置为隐藏在加载时,并且在单击播放按钮时可见,如何在播放按钮时将其返回到隐藏状态再次点击?
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?
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。我需要它,只是隐藏,所以它保持正确的高度。
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.
推荐答案
使用jQuery:
$('#play-pause').click(function(){
if ( $('#video-over').css('visibility') == 'hidden' )
$('#video-over').css('visibility','visible');
else
$('#video-over').css('visibility','hidden');
});
这篇关于切换div的可见性属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文