web-dev-qa-db-fra.com

Activer/désactiver la propriété de visibilité de div

J'ai une vidéo HTML 5 dans un div. J'ai ensuite un bouton de lecture personnalisé - cela fonctionne bien.
Et la visibilité de la vidéo est définie sur masquée lors du chargement et visible lorsque vous cliquez sur le bouton de lecture, comment puis-je la masquer lorsque le bouton de lecture est à nouveau cliqué?

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>

En gros, j'essaye simplement de basculer entre les deux états visible et caché, sauf que je ne peux pas utiliser cette option, car elle est masquée et divisée. J'en ai besoin ici, juste caché, pour qu'il garde la bonne hauteur. 

javascriptjquerycsstoggleshow-hide
36
tfer77

Utilisation de jQuery:

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

Je sais que c'est une vieille question, mais je l'ai trouvée à la recherche d'un problème différent. 

Selon les documents jQuery, appeler toggle () sans paramètres activera la visibilité. 

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

http://jsfiddle.net/Q47ya/

23
timetraveler

Il y a une autre façon de faire cela avec JavaScript. Tout ce que vous avez à faire est d’activer la visibilité en fonction de l’état actuel de la visibilité de la DIV en CSS.

Exemple:

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

Pour nettoyer cela un peu et ne conserver qu'une seule ligne de code (comme vous le feriez avec toggle()), vous pouvez utiliser un opérateur ternary afin que votre code ressemble à ceci (également avec jQuery):

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');
0
elPastor