Introduction to slide and Animation Based on JQuery

Document directory

• JQuery stop () method

JQuery sliding method:You can create a slide effect on the element.
SlideDown () slide down the element.
SlideUp () slides up the element.
SlideToggle () switches between the 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 millisecond.
The optional callback parameter is the name of the function executed after sliding.

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 attributes of the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after the animation is completed.
By default, all HTML elements are static and cannot be moved. To operate the position, first set the position attribute of the element CSS to relative, fixed, or absolute.
JQuery animate ()-Ability to operate on multiple attributes
To generate a Color animation, You need to download the Color animation plug-in from jQuery.com.
JQuery animate ()-Use Relative Value
You can also define a relative value (this value is relative to the current value of the element ). + = Or-= must be added before the value:

JQuery animate ()-Use predefined values
You can even set the animation value of an attribute to "show", "hide", or "toggle ":
$ ("Button"). click (function (){
$ ("Div"). animate ({
Height: 'toggle'
});
});

JQuery animate ()-Use the queue Function
By default, jQuery provides the queue function for animation.
This means that if multiple animate () calls are written after each other, jQuery will create an "internal" queue containing these method calls. Then run these animate calls one by one.

Ex1, ex2

JQuery stop () method

The jQuery stop () method is used to stop an animation or effect before they are completed.

The stop () method applies to all jQuery effect functions, including sliding, fade-in and fade-out, and custom animations.

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

The optional stopAll parameter specifies whether to clear the animation queue. The default value is false, that is, only the animation that stops the activity allows any animations that are placed in the queue to be executed backward.

The optional goToEnd parameter specifies whether the current animation is completed immediately. The default value is false.

Therefore, by default, stop () clears the current animation specified on the selected element.