javascript - 半屏侧边栏修正

Question

刚刚对我的代码有疑问，我正在创建两个弹出窗口，占据每个屏幕的一半。我对 JavaScript 和 jQuery 相当陌生，所以我想确保我做得正确。有没有办法让我在单击时让左侧从左侧滑出，右侧从右侧滑出。另外，如果您发现我可以改进的地方，请告诉我。

HTML

<div class="main-menu">
  <a class="contact-btn" href="#">Contact</a>
  <a class="menu-btn" href="#">Menu</a>
  <div class="split left-side">
    <h1>Contact Form</h1>
  </div>
  <div class="split right-side">
    <div id="nav-outer">
        <div id="mobile-menu"></div><!-- end #mobile-menu -->
        <div id="topnav">
            <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
        </div><!-- end #topnav -->
    </div><!-- #nav-outer -->
    <div class="logo-sidebar">
      <img src="/wp-content/uploads/2018/10/logo.png" alt="">
    </div>
  </div>
</div>

脚本

  $('.right-side').hide();
  $('.left-side').hide();
  $('.menu-btn').click(function(){
    $('.right-side').slideToggle('slow', function(){});

  });
  $('.contact-btn').click(function(){
    $('.left-side').slideToggle('slow', function(){});
  });

Answer 1

看一下 CSS 动画和/或 Jquery 动画。

这里有一个简短的解释:
首先，您想使用一些 CSS 来隐藏您的容器。对于此示例，我假设我们只有一个容器。因此该容器占据了屏幕的 50%，因此必须隐藏在屏幕的左侧或右侧。这可以通过 position:absolute 或 position:relative; 或任何最适合您的方式来完成。
这将是非常短的 JQuery 代码:

$(".slide").click(function(){
    $("div").animate({left: '0px'}, 1000);
});

1000 是动画持续时间，在本例中为 1 秒。现在对正确的站点执行相同的操作。
我希望这能让您有一个基本的了解:

$("button").click(function(){
    $("div").animate({left: '0px'}, 1000);
}); 

div {
  display: block;
  height: 200px;
  width: 200px;
  background: black;
  position: absolute;
  left: -200px;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>click</button>

作为替代方案，您可以查看 JQuery-UI slider ，但我建议您使用“普通”JQuery 解决所有问题，直到您充分了解 JQuery 的工作原理。