What are the effects of jQuery?

What are the effects of jQuery?

Jqeury has the following effects: hidden display, fade-in and fade-out, sliding, animation, and stop animation. You can also link methods and actions. The following describes their usage and required parameters.

1. Hide/display

Hide () can hide elements. Syntax: $ (selector). hide (speed, callback );

Show () to display elements. Syntax: $ (selector). show (speed, callback );

Toggle () switches the hide () and show () methods. The syntax is $ (selector). toggle (speed, callback );

The optional speed parameter specifies the hidden/display speed. The value can be "slow", "fast", or millisecond.

The optional callback parameter is the name of the function executed after the animation is completed.

2. Fade in/out
FadeIn () is used to fade in hidden elements. Syntax: $ (selector). fadeIn (speed, callback );

FadeOut () is used to fade in hidden elements. Syntax: $ (selector). fadeOut (speed, callback );

The fadeToggle () method can be switched between the fadeIn () and fadeOut () methods. Syntax: $ (selector). fadeToggle (speed, callback );

If the element has faded out, fadeToggle () adds a fade-in effect to the element.

If the element is fade in, fadeToggle () adds a fade out effect to the element.

The fadeTo () method allows the gradient to be a given transparency (value between 0 and 1 ). Syntax: $ (selector). fadeTo (speed, opacity, 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 the animation is completed.

The required opacity parameter in the fadeTo () method sets the fade-in and fade-out effect to a given opacity (value between 0 and 1 ).

3. Slide

The slideDown () method is used to slide down an element. Syntax: $ (selector). slideDown (speed, callback );

The slideUp () method is used to move an element up. Syntax: $ (selector). slideUp (speed, callback );

The slideToggle () method can be switched between the slideDown () and slideUp () methods.

If the elements slide down, slideToggle () can slide them up.

If the elements slide up, slideToggle () can slide down them. Syntax $ (selector). slideToggle (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.

4. animate Method

The animate () method is used to create a custom animation. 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.

The following example demonstrates the simple application of the animate () method. It moves the <div> element to the left until the left attribute is 250 pixels:

     $("button").click(function(){       $("div").animate({left:'250px'});     }); 

You can also use multiple attributes when generating an animation:

     $("button").click(function(){       $("div").animate({        left:'250px',        opacity:'0.5',        height:'150px',        width:'150px'       });     }); 

Note that by default, all HTML elements have a static location and cannot be moved.

To operate the position, first set the CSS position attribute of the element to relative, fixed, or absolute!

5. stop Method

The 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.

Syntax:$ (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.

6. callback Function

Call the Callback function when animation 100% is complete. All of the above methods are used.

7. chaining

Chaining allows us to allow multiple jQuery methods (on the same element) in a statement ).

The following example links css (), slideUp (), and slideDown () together. The "p1" element first changes to red and then slides up and down:

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

In this way, you can run the following code:

    $("#p1").css("color","red")       .slideUp(2000)       .slideDown(2000);

JQuery will discard unnecessary spaces and execute the above Code lines according to a long line of code.

The above are some of the methods for jquery's effects. If you have any omissions or misoperations, please note. Thank you.