Home > Developer > Web Develop
Common dynamic effects of jquery:
Hide/Show Effects:
1.(1): Hide, Show: Using JQuery, the Hide () and show () methods can be used to hide and display HTML elements.
(2): Hidden/displayed Speed:
Grammar:
$ (selector). Hide (speed, callback);
$ (selector). Show (speed, callback);
The speed parameter specifies the rate of concealment/display; The callback parameter is the function name that is executed after hiding or displaying. such as: $ ("P"). Hide (1000) the speed at which the content is hidden.
2. Use the Toggle () method to toggle the Hide () and show () methods. such as: $ ("P"). Toggle ().
Fade effect:
1.jQuery fadeIn () is used to fade in hidden elements.
Syntax: $ ("#div1"). FadeIn ();
$ ("#div2"). FadeIn ("slow");
$ ("#div3"). FadeIn (3000);
after clicking:
The 2.jQuery FadeOut () method is used to fade out visible elements. syntax such as 1;
The 3.jQuery Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method. syntax such as 1;
If the element has faded out, fadetoggle () adds a fade effect to the element.
If the element has been faded in, fadetoggle () adds a fade effect to the element.
The 4.jQuery FadeTo () method allows the gradient to be a given opacity
Syntax: $ ("#div1"). FadeTo ("slow", 0.15);
$ ("#div2"). FadeTo ("slow", 0.4);
$ ("#div3"). FadeTo ("slow", 0.7);
Slide Effect:
The 1.jQuery Slidedown () method is used to slide the element down.
Syntax: $ ("#panel"). Slidedown ();
The 2.jQuery Slideup () method is used to slide the element up.
Syntax: $ ("#panel"). Slideup ();
The 3.jQuery Slidetoggle () method can be toggled between the Slidedown () and the Slideup () method.
If the elements slide down, slidetoggle () can slide them up.
If the elements slide up, slidetoggle () can slide them down.
Syntax: $ (". Panel"). Slidetoggle ("slow");
Animation:
The 1.jQuery animate () method is used to create custom animations.
Syntax:$ ("div"). Animate ({left: ' 250px '});
Multiple properties can be used in the process of generating an animation:
Such as:
$ ("div"). Animate ({
Left: ' 250px ',
Opacity: ' 0.5 ',
Height: ' 150px ',
Width: ' 150px ',
Height: ' Toggle '
});
var div=$ ("div");
Div.animate ({height: ' 300px ', opacity: ' 0.4 '}, "slow");
Div.animate ({width: ' 300px ', opacity: ' 0.8 '}, "slow");
Click to start:
Stop Animation:
The 1.jQuery Stop () method is used to stop animations or effects before they are complete.
The Stop () method applies to all JQuery effect functions, including sliding, fading, and custom animations.
Syntax: $ ("#panel"). Stop ();
The implementation code is as follows:
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#hide"). Click (function () {
$ ("P"). Hide (); Hidden
});
$ ("#show"). Click (function () {
$ ("P"). Show (); Show
});
});
</script>
<body>
<p id= "P1" > Click Hide to hide it, click on the display is displayed </p>
<button id= "Hide" type= "button" > Hidden </button>
<button id= "show" type= "button" > Display </button>
</body>
jquery Dynamic Effect Instances
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
