Is it possible for jQuery slideDown() function to apply display:flex property instead of display:block?
Please try the following start callback:
$(".item").slideDown({
start: function () {
$(this).css({
display: "flex"
})
}
});
Here are two potential ways you can achieve what you discuss.
Option 1
One method to achieve this is to wrap the element within a div
and give the wrapper div
a class with the display: flex
property.
e.g (assuming your HTML structure is along these lines based on your BEM CSS):
<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>
Option 2
Alternatively you could overwrite the function with an anonymous callback function, like so:
$('.nav__item__account-dropdown--open').slideUp(500, function() {
$(this).css('display', 'flex');
});
I don't know if this is a newer behaviour, but in jQuery 3.2 at least, if the element has an inline style of display:none, jQuery removes this property rather than add a new display property on slideUp(), slideToggle() etc.
So, if you set your element to display:flex in the CSS, and then apply display:none either inline using a style tag on the element, or with something similar to the below immediately on page load:
$('.element').css('display', 'none');
Then when you use slideDown() etc, you'll be left with a visible element with the correct display property.
If your element should only be hidden at a certain screen size, you can run the code to hide the element within an if statement based on screen width, eg
if( $(window).width() < 600){
$('.element').css('display', 'none');
}
This has the potential disadvantage of the element briefly being shown until the page finishes loading, but if you're going to allow the element to be shown later on I wouldn't think this would be a big deal. You could also use something like slideUp() to initially hide the element, so it animates away nicely.