亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

jquery show/hide with slow input 不工作

jquery show/hide with slow input 不工作

白衣非少年 2023-05-25 16:38:07
我想制作一個簡單的電子郵件輸入 + 按鈕表單,一旦提交,應該在同一頁面上替換為另一個 div。我在表單上應用了 jquery 的 .hide("slow") ,在第二個 div 上應用了 .show("slow") ,雖然它確實顯示/隱藏元素,但它不應用平滑過渡。我究竟做錯了什么??實例: https: //codepen.io/mcancode/pen/vYKXmbr代碼:  <!DOCTYPE html><html><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>
查看完整描述

1 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

只是幾件事。

  1. 定位要隱藏的內部元素 - 您不能定位包裝元素(“新聞稿”)隱藏它然后顯示其中一個子元素。您需要定位-“取消訂閱”。

  2. 為您想要淡入視圖的其他區域提供一個起始樣式以將其隱藏(“已訂閱”) style="display:none"

  3. 看起來您引用的 jquery 版本不包含此動畫 - 我在您的原始參考之后引用了 jquery 的更新版本(https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery .min.js )

<!DOCTYPE html>

<html>

<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="[email protected]" 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>


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號