toggle Sichtbarkeit von div

Question

Ok, ich weiß, das ist einfach mein Gehirn funktioniert gerade nicht richtig jetzt. Ich habe ein HTML 5 Video in einem Div. Ich habe dann eine benutzerdefinierte Play-Taste - das funktioniert gut. Ich habe die Sichtbarkeit des Videos beim Laden auf "Versteckt" und "Sichtbar" eingestellt, wenn ich auf die Schaltfläche "Abspielen" klicke. Wie kann ich es nach "Versteckt" zurückversetzen, wenn die Wiedergabetaste erneut angeklickt wird?

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



<script type="text/javascript" > 
function showVid(){ 
document.getElementById('video-over').style.visibility='visible'; 
} 
</script> 



#video-over{ 
visibility: hidden; 
background-color: rgba(0,0,0,.7) 
} 

Ich versuche im Grunde nur es zwischen den beiden Zuständen der sichtbaren und versteckten zu wechseln, außer ich nicht Knebel, weil das Show verwenden kann und die div versteckt. Ich brauche es dort, nur versteckt, damit es die richtige Höhe behält.

Answer 1

jQuery verwenden:

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

Answer 2

Ich weiß, dass dies eine alte Frage, aber ich stieß auf es ein anderes Problem untersucht.

Je nach jquery docs schaltet toggle() ohne Parameter die Sichtbarkeit um.

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

http://jsfiddle.net/Q47ya/

Answer 3

Es gibt einen anderen Weg, dies JavaScript mit nur tun. Sie müssen lediglich die Sichtbarkeit basierend auf dem aktuellen Status der DIV-Sichtbarkeit in CSS umschalten.

Beispiel:

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