~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Visual Studio 2015 & amp; & JQuery
Author: WeiYongGui
Time to write:
May 02, 2020~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
A, shows the effect of jQuery
1, show/hide the matched elements ()
$(" button: the first ") on (" click ", function () {
$(" wrap "). The show (' missile);
});
2, hide () [hidden elements display]
$(" button: eq (1) "), on (" click ", function () {
$(" wrap "). Hide (1000, 'linear');
});
3, toggle () [if the element is visible, switch to a hidden; if the element is hidden, and switch to a visible]
$(" button: the last ") on (" click ", function () {
$(" wrap "). Toggle (2000, 'linear', function () {
Alert (" animation is done ");
});
});
Second, the effectiveness of sliding in the jQuery
1, slideDown () [by height change (increase) down to dynamically display all of the matched elements]
The function slideDownFun () {
$(" wrap "). SlideDown ();
}
2, slideUp () [by height variations (reduce) up to hide all of the matched elements dynamically]
The function slideUpFun () {
$(" wrap "). SlideUp (1000);
}
3, slideToggle () [by height change to switch the visibility of all matched elements]
The function slideToggleFun () {
$(" wrap "). SlideToggle ();
}
Three, the fading effect of jQuery
1, the fadeOut () [fade-out]
The function fadeOutFun () {
$(" wrap "). The fadeOut ();
}
2, fadeIn () [fade in effect]
The function fadeInFun () {
$(" wrap "). FadeIn ();
}
3, fadeToggle fade in/out effect switch ()
The function fadeToggleFun () {
$(" wrap "). FadeToggle (1000);
}
4, fadeTo ()/change the transparency of selected elements
The function fadeToFun () {
$(" wrap "). FadeTo (1000,0.5);
}
Four, custom animation animation
In front of a few methods, are defined in the jQuery simple animation effects, if you want to realize more complex animation, you will need to use animation animation implement
- the animate (params, [speed], [much], [fn]) is used to create a custom animation function,
Form of this function is the key to specify the animation style attributes object, and the results of each attribute in this object said a can change the style of the attribute (such as "height", "top" or "opacity"), note: all the specified attribute must be in the form of a camel, such as substitute marginLeft margin - left.
And the value of each attribute says this animation with the style attribute to the end, if it is a numerical value, style properties will be from the current value of the gradient to the specified value, if you are using "hide", "show" or "toggle" such a string value, will call for the attribute the default form of animation,
Parameter description:
Params: one group contains as animation and the style of the final value attribute and its value, the collection of {} : attribute value, attribute: attribute value
Speed: string, one of the three scheduled speed (" missile ", "normal", or "fast") or said animation long millisecond value (such as: 1000)
Much: to use the erase the effect of (need to plug-in support). The name of the default jQuery "linear" and "swing".
Fn: in the function to be executed by the animation is completed, each element execution time,

CodePudding user response: