jQuery slidedown() Funktion funktioniert nicht für beide Elemente nach Click-Ereignis

Question

Ich mag würde eine Animation mit der slideDown() Funktion machen und irgendwie ist .quote-container nicht darin enthalten, auch wenn die slideDown() Funktion enthält .quote-container und #new-quote Elemente.

Warum funktionieren sie in der ersten Lade-Animation und in der zweiten (nach dem Klick-Ereignis), nicht (nur die #new-quote funktioniert)? .quote-container wird erst nach dem Ende der slideDown() - Animation angezeigt, also 2 Sekunden.

// 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 behoben:

I $(".quote-container, #new-quote").css("display", "inline-block").hide(); Linie von der Onclick-Ereignis entfernen benötigt:

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