jQuery显示/隐藏慢速输入不起作用

问题描述

我想制作一个简单的电子邮件输入+按钮表单，一旦提交，应留在同一页面上，并用另一个div替换。我在窗体上应用了jquery的.hide（“ slow”），在第二个div上应用了.show（“ slow”），尽管它确实显示/隐藏了元素，但并没有应用平滑过渡。

我在做什么错？？

实时示例：https://codepen.io/mcancode/pen/vYKXmbr

代码：

  <!DOCTYPE html>
<html lang="en">
<head>
  
  <style>
#subscribed > div > p {
  display: none;
}
</style>

</head>
<body>
 
  <main>
    <section id="newsletter">
      <div id="unsubscribed">
        <h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
        <form id="newsletter-form">
          <div>
            <input type="email" placeholder="Enter your email">
            <button type="submit">
              Submit
            </button>
          </div>  
        </form>
      </div>
      <div id="subscribed">
        <div>
          <p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
        </div>
      </div>
    </section>
    <!-----------------END OF NEWSLETTER---------->

  </main>

  <!--JS files...-->
  <!-- jQuery and JS bundle w/ Popper.js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script>
  
$(() => {

  //check when newsletter form submitted
  $("#newsletter-form").submit((event)=> {
    event.preventDefault();
    $("#unsubscribed").hide("slow");
    $("#subscribed>div>p").show("slow");
  })
});
  </script>
</body>
</html>

解决方法

几件事。

定位要隐藏的内部元素-您不能定位包装元素（“新闻通讯”）以隐藏它，然后显示其中一个子元素。您需要定位-“未订阅”。
将要淡入的其他区域显示为隐藏样式（“已订阅”）的初始样式style =“ display：none”
您所引用的jquery版本似乎不包含此动画-我在原始引用（https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js）之后引用了jquery的更新版本

<!DOCTYPE html>
<html lang="en">
<head>
  
  <style>
</style>

</head>
<body>
 
  <main>
    <section id="newsletter">
      <div id="unsubscribed">
        <h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
        <form id="newsletter-form">
          <div>
            <input value="sample@email.com" type="email" placeholder="Enter your email">
            <button type="submit">
              Submit
            </button>
          </div>  
        </form>
      </div>
      <div id="subscribed" style="display:none;">
        <div>
          <p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
        </div>
      </div>
    </section>
    <!-----------------END OF NEWSLETTER---------->

  </main>

  <!--JS files...-->
  <!-- jQuery and JS bundle w/ Popper.js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  
$(() => {

  //check when newsletter form submitted
  $("#newsletter-form").submit((event)=> {
    event.preventDefault();
    $("#unsubscribed").hide("slow");
    $("#subscribed").show("slow");
  })
});
  </script>
</body>
</html>

hide html javascript jquery show