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

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

    $( "#logoimage" ).show( "fade",2000);

  });

Answer 2

您可以在单击该元素时向该元素添加一个“显示或可见”类以显示它，并在第二次单击时显示它以检查该元素是否具有“显示或可见”这个类，如果它应该然后隐藏它！例子 ：

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

如果您只想在点击时显示/隐藏，那么您可以使用

.fadeToggle()

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

$(function() {

    var popup = $('.hover-popup');

    popup.click(function() {

        $(this).next().children('.popup-box').fadeToggle(150);

    });

});

编辑：

添加基本的“单击任意位置以关闭”

$(function() { 

    $(document).on("click", function() {

        $(".popup-box:visible").fadeOut(150);

    });

});

但这只会拾取尚未处理的点击（例如点击背景，但不点击其他按钮）。

理想情况下，您还可以显示覆盖整个页面的“模态背景”，单击它会隐藏弹出框。但这对于 SO 问题来说有点太宽泛了，您最好查看 3rd-party 插件（要求一个也是题外话）。