How do jQuery slideDown and slideUp work?

jQuery slideDown function shows an element from top to bottom in specified time. slideUp function hides an element from bottom to top in specified interval.

$(element).slideDown(interval, function(){});

$(element).slideUp(interval, function(){});


How does jQuery do it?

jQuery adds several attributes such as “display”,”padding-xxx”, and “margin-xxx” to the element and adjusts their values in the specified interval to realize the animation effects. After slideDown finishes, you can see there added an attrubite in the element: display:block. After slideUp finishes, you can see the attribute becomes: display:none, which actually hides the element.


If you like my content, please consider buying me a coffee. Buy me a coffeeBuy me a coffee Thank you for your support!

Leave a Reply