Menu
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?
330
The slideDown() Method in jQuery is used to check the visibility of selected elements or to show the hidden elements. It works on two types of hidden elements: Elements hidden using jQuery methods. Elements hidden using display: none in CSS.
slideToggle() Display or hide the matched elements with a sliding motion.
jQuery slideToggle() Method The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.
The slideUp() is an inbuilt method in jQuery which is used to hide the selected elements. Syntax: $(selector). slideUp(speed); Parameter: It accepts an optional parameter “speed” which specifies the speed of the duration of the effect.
Please try the following start callback:
$(".item").slideDown({ start: function () { $(this).css({ display: "flex" }) } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
