使用 jQuery 出現（單擊后）平滑的動畫/過渡內容

Question

我有一個“表單”，根據選中的復選框顯示文本反饋（2 個選項）。 原則上這是可行的，但是我想改進文本顯示方式的動畫/過渡。

如果您選擇 select 所有復選框，則將p滑入視圖。 任何其他金額，您都會收到一條功能相同的單獨消息。 目前這是“硬編碼”到 5 個復選框。 不知道是否有可能基於數據屬性或其他東西使其更靈活，所以如果將來有 6 個 - 它不是一個全新的 JS 塊？

但主要目標是當消息顯示時，它會滑入視圖。 但是，如果您更改答案並再次單擊“提交”，則 animation 會出現問題。

所以我想改進更新之間的過渡。 我在其他地方做過這個，它只是第一次滑動打開（如果這更容易的話），但我無法讓它在這個版本上工作。

此處的其他實現： https://codepen.io/moy/pen/LYdoEBG

但如果可能的話，我希望兩者保持一致。 因此，只需刷新/更新/淡入即可，而不是同時滑動。 除非至少可以使滑動/推送下面的頁面/內容不優雅嗎？

 $(".form-feedback.btn").click(function () { let checkboxes = $(this).parents(".form-feedback").find('input:checked').length $(this).parents(".form-feedback").find(".form-feedback__reveal p").hide() if(checkboxes == 5){ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200) }else{ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200) } });

 .hide { display: none; }.label { display: block; margin-bottom: 24px; }.checkbox { display: block; margin-bottom: 12px; }.btn { background: black; border-radius: 24px; color: white; display: inline-flex; padding: 12px 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxout"> <div class="form-feedback"> <label class="label">HACCP helps a food business to...</label> <label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label> <label class="checkbox"><input type="checkbox">Identify critical control points</label> <label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label> <label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label> <label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label> <a href="#" class="btn btn--primary">Submit</a> <div class="form-feedback__reveal"> <p class="hide" data-feedback="all">That's right, HACCP supports a business in all of the areas listed.</p> <p class="hide" data-feedback="some">That's incorrect, HACCP actually supports a business in all of these areas.</p> </div> </div> </div> <div class="content"> <h4>Content below to check it gets pushed down smoothly</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

Answer 1

 $(".form-feedback.btn").click(async function () { let checkboxes = $(this).parents(".form-feedback").find('input:checked').length $(this).parents(".form-feedback").find(".form-feedback__reveal p").slideUp(200) await new Promise(res => { setTimeout(res, 200); }); $(this).parents(".form-feedback").find(".form-feedback__reveal p").hide() if(checkboxes == 5){ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200) }else{ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200) } });

 .hide { display: none; }.label { display: block; margin-bottom: 24px; }.checkbox { display: block; margin-bottom: 12px; }.btn { background: black; border-radius: 24px; color: white; display: inline-flex; padding: 12px 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxout"> <div class="form-feedback"> <label class="label">HACCP helps a food business to...</label> <label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label> <label class="checkbox"><input type="checkbox">Identify critical control points</label> <label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label> <label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label> <label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label> <a href="#" class="btn btn--primary">Submit</a> <div class="form-feedback__reveal"> <p class="hide" data-feedback="all">That's right, HACCP supports a business in all of the areas listed.</p> <p class="hide" data-feedback="some">That's incorrect, HACCP actually supports a business in all of these areas.</p> </div> </div> </div> <div class="content"> <h4>Content below to check it gets pushed down smoothly</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

我認為這是朝着正確的方向發展。 我添加了一個 animation 來關閉slideDown 。 如果文本不會更改，您還可以添加檢查以確保它不會上下滑動

Answer 2

我認為 Jess 的 animation 是您正在尋找的，所以這個解決方案是基於

如果您選擇 select 所有復選框，則 ap 將滑入視圖。 任何其他金額，您都會收到一條功能相同的單獨消息。 目前這是“硬編碼”到 5 個復選框。 不知道是否有可能基於數據屬性或其他東西使其更加靈活，所以如果將來有 6 個 - 它不是一個全新的 JS 塊？

為確保正確處理 .btn 元素上的.btn器，請使用target.preventDefault() 。 看到元素是一個<a>元素，單擊它將強制您的屏幕視圖跳轉到頂部。 preventDefault()確保當您單擊鏈接時視口保持在原位（盡管將其設置為<button>或<input type="submit">在語義和可訪問性方面是正確的，除非它實際上是一個將重定向用戶）

當你說你想要一個“動態解決方案”時，我假設你想要在選擇 5 個輸入時顯示的消息，如果所有輸入都被選中，無論輸入元素的數量是多少。

您已經有變量checkboxes ，其中包含被選中的復選框數量的長度。 只需創建一個新的、非常相似的變量來保存表單中復選框總數的長度，並在您的if語句中將這兩個變量設置為彼此相等。 這樣，如果所有復選框都被選中，您的消息將始終顯示。

 $(".form-feedback.btn").click(function(e) { // remove default behaviour of the <a> e.preventDefault(); // variables that hold the length of checkboxes let checkedCheckboxes = $(this).parents(".form-feedback").find('input:checked').length; let checkboxes = $(this).parents(".form-feedback").find('input').length; $(this).parents(".form-feedback").find(".form-feedback__reveal p").hide() if (checkedCheckboxes === checkboxes) { $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200) } else { $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200); } });

 .hide { display: none; }.label { display: block; margin-bottom: 24px; }.checkbox { display: block; margin-bottom: 12px; }.btn { background: black; border-radius: 24px; color: white; display: inline-flex; padding: 12px 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxout"> <div class="form-feedback"> <label class="label">HACCP helps a food business to...</label> <label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label> <label class="checkbox"><input type="checkbox">Identify critical control points</label> <label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label> <label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label> <label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label> <a href="#" class="btn btn--primary">Submit</a> <div class="form-feedback__reveal"> <p class="hide" data-feedback="all">That's right, HACCP supports a business in all of the areas listed.</p> <p class="hide" data-feedback="some">That's incorrect, HACCP actually supports a business in all of these areas.</p> </div> </div> </div> <div class="content"> <h4>Content below to check it gets pushed down smoothly</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>