jquery show/hide 慢速输入不起作用

Question

我想制作一个简单的电子邮件输入 + 按钮表单，一旦提交，应在同一页面上替换为另一个 div。我在表单上应用了 jquery 的 .hide("slow") 并在第二个 div 上应用了 .show("slow") 并且虽然它确实 show/hide 元素，但它没有t 应用平滑过渡。

我做错了什么？？

实例：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>

Answer 1

只是一些事情。

以要隐藏的内部元素为目标 - 您不能以包装元素（“newsletter”）为目标隐藏它，然后显示其中一个子元素。您需要定位 - “未订阅”。
给你想要淡出的其他区域一个开始样式来隐藏它（“订阅”）style="display:none"
您引用的 jquery 版本似乎不包含此动画 - 我在您的原始引用之后引用了 jquery 的更新版本（https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js)

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

jquery show/hide 慢速输入不起作用

jquery show/hide with slow input not working

html

javascript

jquery

show

hide