使用 jQuery 輕松轉換切換 Div

Question

我試圖在切換 div 時建立平滑過渡。 現在切換是即時的。

 $(document).ready(function(){ $(".product-suggestion-form-container").click(function(){ $(".form-div-top").toggle(); }) });

 .description-container { font-family: "Proxima Nova Regular"; }.form-div-outer { margin: 10px 0; }.product-suggestion-form-container { border: 1px solid #c6c6c6; border-bottom: none; padding: 5px 10px; display: flex; justify-content: space-between; background-color: #f8f7f7; cursor: pointer; } /*initial display*/.form-div-top { display: none; background-color: #f8f7f7; border: 1px solid #c6c6c6; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="description-container"> Fill out the product suggestion and contact us forms below: </div> <div class="form-div-outer"> <div class="product-suggestion-form-container"> <span class="form-title">Product Suggestion Form</span> <span class="dropdown-arrow"><i class="fas fa-caret-down"></i> </span> </div> <div class="form-div-top"> <form class="form-div-inner-top"> <span class="input-group input-group-name"> <input type="text" placeholder="Name" class="form-input" required> </input> </span> <span class="input-group input-group-email-address"> <input type="text" placeholder="Email Address" class="form-input" required></input> </span> <span class="input-group description-of-product-desired"> <input type="textarea" placeholder="Description of product desired" class="form-input" required></input> </span> </form> </div> </div>

我嘗試添加.animate()和.fadeIn()但兩者都不起作用。 我的語法錯了嗎？ 我稱呼他們的方式是錯誤的嗎？ 過渡仍然是即時的。

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").toggle()
      $(".form-div-top").animate({
       duration: 200
      });
      $(".form-div-top").fadeIn( "slow", function() {
       // Animation complete
      });
   })
});

Answer 1

jQuery 的toggle方法接受以毫秒為單位的持續時間作為第一個參數。

$(".form-div-top").toggle(300);

 $(document).ready(function(){ $(".product-suggestion-form-container").click(function(){ $(".form-div-top").toggle(300); }) });

 .description-container { font-family: "Proxima Nova Regular"; }.form-div-outer { margin: 10px 0; }.product-suggestion-form-container { border: 1px solid #c6c6c6; border-bottom: none; padding: 5px 10px; display: flex; justify-content: space-between; background-color: #f8f7f7; cursor: pointer; } /*initial display*/.form-div-top { display: none; background-color: #f8f7f7; border: 1px solid #c6c6c6; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="description-container"> Fill out the product suggestion and contact us forms below: </div> <div class="form-div-outer"> <div class="product-suggestion-form-container"> <span class="form-title">Product Suggestion Form</span> <span class="dropdown-arrow"><i class="fas fa-caret-down"></i> </span> </div> <div class="form-div-top"> <form class="form-div-inner-top"> <span class="input-group input-group-name"> <input type="text" placeholder="Name" class="form-input" required> </input> </span> <span class="input-group input-group-email-address"> <input type="text" placeholder="Email Address" class="form-input" required></input> </span> <span class="input-group description-of-product-desired"> <input type="textarea" placeholder="Description of product desired" class="form-input" required></input> </span> </form> </div> </div>

Answer 2

我自己可以建議使用toggleClass()方法的解決方案：

...
$(".form-div-top").toggleClass("form-div-top_show");
...

需要為塊活動創建一個額外的 class：

.form-div-top_show {
  opacity: 1;
}

此外，您需要為塊的平滑外觀添加transition規則，並將display: none替換為opacity: 0 ：

.form-div-top {
  opacity: 0;
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
  transition: .5s;
}

 $(document).ready(function(){ $(".product-suggestion-form-container").click(function(){ $(".form-div-top").toggleClass("form-div-top_show"); }) });

 .description-container { font-family: "Proxima Nova Regular"; }.form-div-outer { margin: 10px 0; }.product-suggestion-form-container { border: 1px solid #c6c6c6; border-bottom: none; padding: 5px 10px; display: flex; justify-content: space-between; background-color: #f8f7f7; cursor: pointer; } /*initial display*/.form-div-top { opacity: 0; background-color: #f8f7f7; border: 1px solid #c6c6c6; transition: .5s; }.form-div-top_show { opacity: 1; }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="description-container"> Fill out the product suggestion and contact us forms below: </div> <div class="form-div-outer"> <div class="product-suggestion-form-container"> <span class="form-title">Product Suggestion Form</span> <span class="dropdown-arrow"><i class="fas fa-caret-down"></i> </span> </div> <div class="form-div-top"> <form class="form-div-inner-top"> <span class="input-group input-group-name"> <input type="text" placeholder="Name" class="form-input" required> </input> </span> <span class="input-group input-group-email-address"> <input type="text" placeholder="Email Address" class="form-input" required></input> </span> <span class="input-group description-of-product-desired"> <input type="textarea" placeholder="Description of product desired" class="form-input" required></input> </span> </form> </div> </div>