jQuery 动画淡入淡出...如何创建第二个事件？

Question

我刚刚开始编码，遇到了一个很明显需要解决的问题。

为了给我的网站制作动画，我决定使用 jQuery https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js编写一个 Javascript 代码 。

代码的第一部分对我有用：我点击“悬停我”和视频弹出窗口。都好。

这是我的代码：

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

如您所见，我现在要做的是在鼠标再次单击视频时使视频淡出。我恳请是否有人可以教我这个活动以使其发挥作用。

Answer 1

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

Answer 2

您可以在单击该元素时向该元素添加一个“显示或可见”类以显示它，并在第二次单击时显示它以检查该元素是否具有“显示或可见”这个类，如果它应该然后隐藏它！例子 ：$(function() {&nbsp; &nbsp; &nbsp; var self = $('.hover-popup');&nbsp; &nbsp; &nbsp; self.click(function () {&nbsp; &nbsp; &nbsp; var popUp = self.next().children('.popup-box');&nbsp; &nbsp; &nbsp; if(popUp.hasClass( "visible" ))&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; popUp.fadeOut(150);&nbsp; &nbsp; &nbsp; &nbsp; popUp.removeClass('visible');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; popUp.fadeOut(150);&nbsp; &nbsp; &nbsp; &nbsp; popUp.addClass('visible');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; });});

Answer 3

如果您只想在点击时显示/隐藏，那么您可以使用.fadeToggle()https://api.jquery.com/fadetoggle/$(function() {&nbsp; &nbsp; var popup = $('.hover-popup');&nbsp; &nbsp; popup.click(function() {&nbsp; &nbsp; &nbsp; &nbsp; $(this).next().children('.popup-box').fadeToggle(150);&nbsp; &nbsp; });});编辑：添加基本的“单击任意位置以关闭”$(function() {&nbsp;&nbsp; &nbsp; $(document).on("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; $(".popup-box:visible").fadeOut(150);&nbsp; &nbsp; });});但这只会拾取尚未处理的点击（例如点击背景，但不点击其他按钮）。理想情况下，您还可以显示覆盖整个页面的“模态背景”，单击它会隐藏弹出框。但这对于 SO 问题来说有点太宽泛了，您最好查看 3rd-party 插件（要求一个也是题外话）。