An introduction to sliding and animation based on JQuery_jquery

jQuery sliding methods: You can create sliding effects on elements.
slideDown() slides the element down.
slideUp() slides the element up.
slideToggle() switches between slideDown() and slideUp() methods.

$(selector).slide(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function to be executed after the sliding is completed.

jQuery Animation - The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties that form the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function to be executed after the animation is completed.
By default, the position of all HTML elements is static and cannot be moved. If you want to manipulate position, remember to first set the element's CSS position property to relative, fixed, or absolute.
jQuery animate() - Ability to manipulate multiple properties
If you need to generate color animations, you need to download the Color Animations plugin from jQuery.com.
jQuery animate() - Using relative values ​​
You can also define relative values ​​(the value is relative to the current value of the element). You need to add = or -= in front of the value:

jQuery animate() - Use predefined values
You can even animate a property's value to "show", "hide" or "toggle":
$(" button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - Using queue functionality
By default, jQuery provides queue functionality for animations.
This means that if you write multiple animate() calls after each other, jQuery will create an "internal" queue containing those method calls. Then run these animate calls one by one.

ex1,ex2

jQuery stop() method

jQuery stop() method is used to stop animations or effects before they are completed.

The stop() method works with all jQuery effect functions, including slides, fades, and custom animations.

$(selector).stop(stopAll,goToEnd);

The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which only stops active animations, allowing any queued animations to execute backwards.

The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.

So, by default, stop() will clear the current animation specified on the selected element.