it-swarm.com.de

Umschalten der Sichtbarkeitseigenschaft von div

Ich habe ein HTML 5-Video in einem div. Ich habe dann eine benutzerdefinierte Wiedergabetaste - das funktioniert gut.
Und ich habe die Sichtbarkeit des Videos beim Laden auf ausgeblendet und beim Klicken auf die Wiedergabeschaltfläche sichtbar. Wie kann ich es wieder anzeigen, wenn die Wiedergabeschaltfläche erneut angeklickt wird?

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>

Im Grunde versuche ich nur, es zwischen den beiden Zuständen sichtbar und versteckt umzuschalten, es sei denn, ich kann Toggle nicht verwenden, weil diese Show das div ausblendet. Ich brauche es dort, nur versteckt, damit es die richtige Höhe beibehält. 

36
tfer77

JQuery verwenden:

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

Ich weiß, dass dies eine alte Frage ist, aber ich bin auf ein anderes Problem gestoßen. 

Entsprechend den Jquery-Dokumenten wird der Aufruf von toggle () ohne Parameter die Sichtbarkeit umschalten. 

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

http://jsfiddle.net/Q47ya/

23
timetraveler

Es gibt einen anderen Weg, dies mit nur JavaScript zu tun. Sie müssen lediglich die Sichtbarkeit basierend auf dem aktuellen Status der Sichtbarkeit des DIVs 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';
     }
}
2
FatAussieFatBoy

Um dies mit einem Effekt wie mit $ .fadeIn () und $ .fadeOut () zu tun, können Sie Übergänge verwenden

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}
0
davefrassoni

Um dies etwas aufzuräumen und eine einzige Codezeile beizubehalten (wie Sie es mit einer toggle() tun würden), können Sie einen ternären Operator verwenden.

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