jQuery Animation fade in, fade out…How do I create the second event?

Question

I have just started coding and I have encountered a problem that seems very obvious to fix.

To animate my website, I decided to write a Javascript code using jQuery https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js.

The first part of the code work for me: I click on "Hover Me" and the video pop-up. All good.

Heres my code:

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

The CSS linked just fine

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*/

and here is what i wrote on main.js to see if it works :

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

So as you can see, what I'm trying to do now is to make the video fade-out when the mouse click again over it. I kindly ask if somebody could teach me the event to make it work.

Thanks in advance

Answer 1

If you just want to show/hide on click, then you can use

.fadeToggle()

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

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

---

Edit:

To add a basic "click anywhere to close"

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

but this will only pickup clicks that haven't already been handled (eg clicking on the background, but not clicking on another button).

Ideally, you would also show a "modal background" which covers the whole page and clicking that would hide the popup-box. But that's a bit too broad for an SO question and you might be better off looking at a 3rd-party plugin (asking for one is also off-topic).

Answer 2

You can add a "show or visible" class to that element when it is clicked to show it and show it if it is clicked a second time to check if that element has "show or visible" this class if it should then Hide it! example :

$(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

Thanks everybody..

..and thanks freedomn-m. Fade Toggle work perfectly 👍

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

Answer 4

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