jQuery Animation исчезает, исчезает ... Как мне создать второе событие?

Question

Я только начал писать код и столкнулся с проблемой, которая кажется очевидной для решения.

Чтобы оживить свой веб-сайт, я решил написать код Javascript, используя jQuery https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js.

Первая часть кода работает для меня: я нажимаю «Hover Me» ивидео всплывающее. Все хорошо.

Вот мой код:

<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<div class="example-text">
   I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?    
   <!-- example-hoverVideo strip -->   
   <a class="hover-popup">Hover Me  
   <img class="camera-vector"  src="https://www.matteogiordano.info/svg/video-camera-2.svg">
   </a> 
   <section class="popup-container">
      <div class="popup-box-2">
         <div class="popup-box">
            <video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline=""             autoplay="" muted="" loop="" >
               <source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
            </video>
         </div>
      </div>
</div>
</section>
<!-- example-hoverVideo strip -->   
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
<div class="example-text">
   I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try? 
   <!-- example-hoverVideo strip -->   
   <a class="hover-popup">Hover Me  
   <img class="camera-vector"  src="https://www.matteogiordano.info/svg/video-camera.svg">
   </a> 
   <section class="popup-container">
      <div class="popup-box">
         <video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline=""             autoplay="" muted="" loop="" >
            <source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
         </video>
      </div>
</div>
</section>
<!-- example-hoverVideo strip -->   
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>

CSS просто отлично связался

body {
   padding: 0;
   margin: 0;
   width: 100%;
   background-color: #ddd;
}
/*example-hoverVideo strip*/
.popup-container {
   width: 100%;
   height: 100%;
   pointer-events: none;
}
.popup-box {
   position: fixed;
   width: 74%;
   height: 100%;
   border-radius: 14px;
   background-color: red;
   padding: 0px 0px;
   z-index: 1000;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   display: none;
}

.popup-box-2 {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   padding: 0px 0px;
   z-index: 330;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   display: none;
}

.hover-popup {
   cursor: pointer;
   font-size: 50px;
   color: red;
   font-family: helvetica;
   width: 100%;
   height: 100%;
}
video {
   z-index: 1200;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   padding: 150px;
   width: 100%;
   height: 100%;
}
@media only screen and (max-width: 800px) {
   video {
      padding: 50px;
   }
}
@media only screen and (max-width: 500px) {
   video {
      padding: 0px;
   }
}

.example-text {
   padding: 30px;
   font-size: 50px;
}
.camera-vector {
   pointer-events: none;
   width: 35px;
   margin: 5px;
}
/*example-hoverVideo strip*/

и вот что я написал на main.js, чтобы увидеть, если этоработает:

$(function() {
        var self = $('.hover-popup');
      self.click(function () {
            self.next().children('.popup-box').fadeIn(150);
      });
});

Итак, как вы можете видеть, я пытаюсь сделать так, чтобы видео постепенно исчезало при повторном щелчке мышью по нему. Я любезно спрашиваю, может ли кто-нибудь научить меня этому событию, чтобы заставить его работать.

Заранее спасибо

Answer 1

Если вы просто хотите показать / скрыть при клике, то можете использовать

.fadeToggle()

https://api.jquery.com/fadetoggle/

$(function() {
    var popup = $('.hover-popup');
    popup.click(function() {
        $(this).next().children('.popup-box').fadeToggle(150);
    });
});

---

Редактировать:

Чтобы добавить basic «щелкните в любом месте, чтобы закрыть»

$(function() { 
    $(document).on("click", function() {
        $(".popup-box:visible").fadeOut(150);
    });
});

, но это будет только захватывать клики, которые еще не были обработаны (например, щелчок по фону), но не нажимая на другую кнопку).

В идеале, вы также должны показать «модальный фон», который покрывает всю страницу, и щелчок, который скрыл бы всплывающее окно. Но это слишком широкий вопрос для SO, и вам, возможно, было бы лучше взглянуть на сторонний плагин (запрашивать его тоже не по теме).

Answer 2

Вы можете добавить класс «show or visible» к этому элементу при нажатии на него, чтобы показать его и показать его, если щелкнуть его второй раз, чтобы проверить, имеет ли этот элемент «show or visible» этот класс, если он должен затемСкрыть! пример:

$(function() {
      var self = $('.hover-popup');
      self.click(function () {
      var popUp = self.next().children('.popup-box');
      if(popUp.hasClass( "visible" ))
      {
        popUp.fadeOut(150);
        popUp.removeClass('visible');
      }
      else {
        popUp.fadeOut(150);
        popUp.addClass('visible');
      }
            
            
      });
});

Answer 3

  $('#logoimage').hide("fade",2000,function() {
    $( "#logoimage" ).show( "fade",2000);
  });

Answer 4

Спасибо всем ..

.. и спасибо свободыn-м. Fade Toggle отлично работает ?

$(function() {
        var self = $('.hover-popup');
      self.click(function () {
            self.next().children('.popup-box').fadeToggle(150);
      });
});