attiva/disattiva la visibilità di div

Question

Ok, so che è semplice che il mio cervello non funzioni correttamente in questo momento. Ho un video HTML 5 in un div. Poi ho un pulsante di riproduzione personalizzato - che funziona bene. La visibilità del video è impostata su Nascosto sul carico e visibile quando si fa clic sul pulsante di riproduzione, come posso riportarlo nascosto quando si fa nuovamente clic sul pulsante di riproduzione?

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

praticamente sto solo cercando di farla passare i due stati di visibile e nascosto meno che non possa utilizzare a levetta perché questo è spettacolo e nasconde il div. Ne ho bisogno lì, solo nascosto, quindi mantiene l'altezza corretta.

Answer 1

utilizzando jQuery:

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

Answer 2

So che questa è una vecchia questione, ma mi sono imbattuto in essa la ricerca di un problema diverso.

In base ai documenti jquery, la chiamata a toggle() senza parametri attiva la visibilità.

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

http://jsfiddle.net/Q47ya/

Answer 3

C'è un altro modo di fare questo con un semplice JavaScript. Tutto ciò che devi fare è alternare la visibilità in base allo stato corrente della visibilità di DIV in CSS.

Esempio:

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