przełącz widoczność div

Question

Ok, wiem, że to jest proste, mój mózg po prostu nie działa poprawnie w tej chwili. Mam plik wideo HTML 5 w div. Mam wtedy niestandardowy przycisk odtwarzania - to działa dobrze. Mam widoczność wideo ustawioną na ukrytą pod obciążeniem i widoczną po kliknięciu przycisku odtwarzania. Jak mogę ją ukryć po ponownym kliknięciu przycisku odtwarzania?

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

Ja w zasadzie tylko próbuje włączyć go pomiędzy dwoma stanami widoczne i ukryte z wyjątkiem I nie można użyć przełącznika bo to pokaz i ukrywa div. Potrzebuję go tam, po prostu ukryty, więc zachowuje prawidłową wysokość.

Answer 1

jQuery:

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

Answer 2

wiem, że to jest stare pytanie, ale natknąłem się na to badanie inny problem.

Zgodnie z jquery docs wywołanie toggle() bez parametrów przełącza widoczność.

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

http://jsfiddle.net/Q47ya/

Answer 3

Jest jeszcze inny sposób to zrobić tylko z JavaScript. Wszystko, co musisz zrobić, to zmienić widoczność na podstawie bieżącego stanu widoczności DIV w CSS.

Przykład:

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