Переключить свойство видимости div

У меня есть видео HTML 5 в div. Затем у меня есть пользовательская кнопка воспроизведения - это прекрасно работает.
И у меня видимость видео установлена скрытой при загрузке и видимой при нажатии кнопки воспроизведения, как мне вернуть ее скрытой при повторном нажатии кнопки воспроизведения?

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>

Ответы

Ответ 1

Использование jQuery:

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

Ответ 2

Я знаю, что это старый вопрос, но я столкнулся с этим, исследуя другую проблему.

В соответствии с документами jquery docs вызов toggle() без параметров переключит видимость.

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

http://jsfiddle.net/Q47ya/

Ответ 3

Есть другой способ сделать это с помощью только JavaScript. Все, что вам нужно сделать, это переключить видимость, основанную на текущем состоянии видимости DIV в CSS.

Пример:

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

Ответ 4

Чтобы немного это исправить и сохранить единственную строку кода (как вы сделали бы с помощью toggle()), вы можете использовать троичный оператор, чтобы ваш код выглядел так (также используя jQuery):

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

Ответ 5

Чтобы сделать это с эффектом, подобным $.fadeIn() и $.fadeOut(), вы можете использовать переходы

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