Is it possible to use the jQuery slideDown () function to display a display: flex property instead of displaying: block?

Question

I have it:

function searchOpen() {
    $('.nav__item__account').addClass('nav__item__account--open');
    $('.nav__item__account-dropdown').slideDown(250);
    $('.nav__item__account-dropdown').addClass('nav__item__account-dropdown--open');
    $('.nav__item__account-dropdown input').focus();
}

function searchClose() {
    $('.nav__item__account').removeClass('nav__item__account--open');
    $('.nav__item__account-dropdown').slideUp(250); 
}

function searchDropdown() {
    if ($('.nav__item__account-dropdown').is(":visible")) {
        searchClose();
    } else {
        searchOpen();
    }
}

CSS for nav__item__account-dropdown--open:

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

Although this workaround works, it display: flexis removed before the slide is completed, which leads to some unwanted visual effects.

Is there a way for slideUp()and slideDown()apply display: flexinstead display: block?

Answer 1

Here are two possible ways you can achieve what you are discussing.

Option 1

One way to achieve this is to wrap the element in divand provide the wrapper divwith a class with a property display: flex.

(, HTML CSS BEM):

<nav class="nav" class="nav___item"> 
  <div class="nav__item">
    <div style="display: flex">
      <div class="nav__item__account-dropdown--open">
        ...
      </div>
    </div>
  </div>
</nav>

2

, :

$('.nav__item__account-dropdown--open').slideUp(500, function() { 
  $(this).css('display', 'flex');
});

Answer 2

:

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

Answer 3

, , , , jQuery 3.2, : none, jQuery , slideUp(), slideToggle() ..

, : flex CCS, : , , - :

$('.element').css('display', 'none');

, slideDown() .., .

, , if ,

if( $(window).width() < 600){
    $('.element').css('display', 'none');
}

This has the potential drawback of an element that is displayed briefly until the page finishes loading, but if you want the element to be shown later, I would not think that this would be a big problem. You can also use something like slideUp () to hide the element first so that it animates well.