Is it possible for jQuery slideDown() function to apply display:flex property instead of display:block?

Question

I have this:

function searchOpen() {     $('.account').addClass('account--open');     $('.account-dropdown').slideDown(250);     $('.account-dropdown').addClass('account-dropdown--open');     $('.account-dropdown input').focus(); }  function searchClose() {     $('.account').removeClass('account--open');     $('.account-dropdown').slideUp(250);     }  function searchDropdown() {     if ($('.account-dropdown').is(":visible")) {         searchClose();     } else {         searchOpen();     } } 

CSS for account-dropdown--open is:

.account-dropdown--open {     display: flex !important;     justify-content: center; } 

Though this workaround works, the display: flex is removed before the sliding up finishes which results in some unwanted visuals.

Is there a way for the slideUp() and slideDown() to apply display: flex instead of display: block?

Answer 1

Please try the following start callback:

$(".item").slideDown({   start: function () {     $(this).css({       display: "flex"     })   } });