单击事件后，jQuery slideDown（）函数对两个元素均不起作用

Question

I'd like to make an animation using the slideDown() function and somehow, .quote-container isn't included in it, even if the slideDown() function contains .quote-container and #new-quote elements.

Why do they work in the first load animation and in the second one (after the click event), don't (only the #new-quote works)? .quote-container is only displayed after the slideDown() animation end, which is 2 seconds.

 // slideDown() works only for #new-quote $("#new-quote").on("click", function() { $(".quote-container, #new-quote").slideUp(2000, function() { $(".quote-container, #new-quote") .css("display", "inline-block") .hide(); $(".quote-container, #new-quote").slideDown(2000); }); }); // slideDown() for both elements works var height = $(".quote-container").outerHeight(); $(".quote-container, #new-quote") .css("display", "inline-block") .hide(); $("#new-quote").css("height", height + 80); $(".quote-container").css("padding", "2.5rem"); $(".quote-container, #new-quote").slideDown(2000); 

 html, body { height: 100%; width: 100%; } body { margin: 0; padding: 0; background: #333; color: #333; font-family: sans-serif; } .v-wrap { height: 100%; text-align: center; } .v-wrap:before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .quote-container { width: 31.25rem; background: #fff; margin: auto; vertical-align: middle; border-radius: 0.1875rem; padding: 0 2.5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; display: none; } .quote-text { font-size: 1.625rem; } .quote-text i { margin-right: 0.6rem; } .quote-text p { display: inline; } .quote-author { font-size: 1rem; margin: 0 0.4rem 2rem 0; text-align: right; } .button { padding: 0.75rem; text-align: center; font-size: 1em; color: #fff; border-radius: 3px; display: inline-block; cursor: pointer; -webkit-user-select: none; user-select: none; } .button:not(#new-quote) { min-width: 1rem; min-height: 1rem; } .button:hover:not(#new-quote) { opacity: 0.8; } .button i { vertical-align: middle; } #new-quote { white-space: nowrap; writing-mode: vertical-lr; height: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; vertical-align: middle; background: #fff !important; position: relative; right: 0.25625rem; color: #333; padding: 0 .75rem; display: none; } #new-quote:before { content: ""; position: absolute; height: 100%; width: 0.0625rem; bottom: 0; left: 0; visibility: hidden; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #new-quote:hover:before { visibility: visible; -webkit-transform: scaleY(1); transform: scaleY(1); } footer { font-size: 0.85rem; } footer a { position: relative; text-decoration: none; color: #fff; } footer a:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: #fff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } footer a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="v-wrap"> <div class="quote-container"> <div class="quote-text"> </div> <div class="quote-author"></div> <a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a> <a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a> </div> <div id="new-quote" class="button">New quote</div> <footer><a href="https://codepen.io/Kestis500">Created by LukasLSC</a></footer> </div> 

Answer 1

Problem fixed :

I needed to remove $(".quote-container, #new-quote").css("display", "inline-block").hide(); line from the onclick event:

$("#new-quote").on("click", function() {
  $(".quote-container, #new-quote").slideUp(2000, function() {
    $(".quote-container, #new-quote").slideDown(2000);
  });
});