JQuery animations summary
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: VisualStudio2015 jQuery
Author: wen-jian tang
Writing time: on May 2, 2020
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
The animation effects of jQuery:
Show (show) :
Display the hidden elements,
Column: $(" button: the first ") on (" click ", function () {
$(" wrap "). The show (); : don't pass parameters in brackets is all according to
$(" wrap "). The show (' missile); Pass the parameters is shown in the
});
Hide (hidden) :
The display elements hidden:
Column: $(" button: eq (1) "), on (" click ", function () {
$(" wrap "). Hide (); : don't pass parameters in brackets is all hidden
$(" wrap "). Hide (1000, 'linear'); The left side is the right time is to specify the transition of change
});
$(ele). The show () method will be the width of the matched elements, height, and opacity, and at the same time for animation operation
Toggle (switch) :
$(" button: the last ") on (" click ", function () {
$(" wrap "). Toggle (); No transition time
$(" wrap "). Toggle (2000, 'linear', function () {
Alert (" animation is done "); Set up in the switch to transition
});
The custom animation:
Animation:
In this custom animation style of the code as the background color is not shown, unless it is to use the plugin,
Only value is the number of display and keys to write down the hump in the form of column: fontSize
Such as those with a unit such as px with a ' 'written inside the
Column: the animate ({
Left: 50,
Width: '50 px'
Opacity: 'show',
FontSize: "10 em,"
}, 500);
If the value where there is a + or -==that is the target and the current value or minus the current value
Column: the animate ({
Left: '50 px +='
},
"missile"The effect of the fading:
Fades after not to change the height to width is only the transparency color
Fade out fadeout ()
Column: the function fadeOutFun () {
$(" wrap "). The fadeOut ();
}
Fade in: fadein ()
Column: the function fadeInFun () {
$(" wrap "). FadeIn ();
}
Fade out the switch:
The function fadeToggleFun () {
$(" wrap "). FadeToggle (1000);
}
Change the opacity:
The function fadeToFun () {
$(" wrap "). FadeTo (1000,0.5);
}
Sliding effect
SlideDown (slide down) :
The function slideDownFun ()
{
$(" wrap "). SlideDown ();
}
SlideUp (sliding upwards) :
The function slideUpFun ()
{
$(" wrap "). SlideUp ();
$(" wrap "). SlideUp (1000); You can set the sliding time
}
Slide the switch
The function slideToggleFun () {
$(" wrap "). SlideToggle ();
}