使用 jQuery 轻松转换切换 Div

Question

I'm trying to establish a smooth transition when toggling a div. Right now the toggle is immediate.

 $(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>

I've tried to add .animate() and .fadeIn() but neither are working. Is my syntax wrong? Is the way I'm calling them wrong? Transition is still immediate.

$(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's toggle method accepts a duration in milliseconds as the first argument.

$(".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

On my own I can suggest a solution using the toggleClass() method:

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

It is necessary to create an additional class for the block activity:

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

And also, you need to add a transition rule for the smooth appearance of the block, and replace display: none with 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>