~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: Peng Qiwang
Writing time: on May 4, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
JQueryAnimation jQuery animation
The effect of the jQuery 1.0
(1) the show ()
show hidden matched element(2) hide () the hidden display element
(3) toggle () if the element is visible, switch to a hidden; If the element is hidden, and switch to a visible,
1. The jQuery basic results show () and hide ()
- show ([speed], [much], [fn])
show hidden matched element- hide ([speed], [much], [fn]) hidden display element
- toggle ([speed], [much], [fn])
To bind two or more of the event handler function, in response to the selected elements take turns to the click event,
If the element is visible, switch to a hidden; If the element is hidden, and switch to a visible,
Parameter description:
Speed: show/hide effect, the speed of the default is "0" milliseconds, the possible values: missile (600), normal, fast (200), "much: (Optional) is used to specify switching effects, the default is" swing ", available parameters "linear"
Fn: in the function to be executed by the animation is completed, each element performs a
Description: through the display style property value control elements to hide and display
The parameters of the three methods that can refer to the jQuery API
$(ele). The show () method will be the width of the matched elements, height, and opacity, and at the same time for animation operation
The effect of sliding in jQuery 1.1
1) slideDown () through the height change (increase) down to dynamically display all of the matched elements
(2) the slideUp () through the height changes (reduce) up to dynamically hide all of the matched elements
(3) slideToggle () through the height changes to switch the visibility of all matched elements
1. - slideDown ([speed], [much], [fn])
Down through the height change (increase) to dynamically display all of the matched elements, optionally trigger at the completion of a display a callback function
This animation effects only the height of the elements, can make the matching element is displayed in the form of "sliding"
- slideUp ([speed], [much], [fn])
Through highly changes (reduce) up to dynamically to hide all of the matched elements, optionally trigger at the completion of a hidden a callback function
This animation effects only the height of the elements, can make the matching element is displayed in the form of "sliding"
- slideToggle ([speed], [much], [fn])
Through the height changes to switch the visibility of all matched elements, and optionally trigger at the completion of a switch a callback function
Parameter description:
The speed of speed: show/hide effect, default is "0" milliseconds, the possible values: missile, normal, fast, "
Much: (Optional) is used to specify switching effects, the default is "swing", "linear" available parameter
Fn: in the function to be executed by the animation is completed, each element performs a
The fading effect in jQuery 1.2
1) fadeOut () fade-out
(2) fadeIn () fade in effect
(3) fadeToggle () fade in/out effect switch
(4) fadeTo () to change the transparency of selected elements
The fading effect in jQuery 1.0
- fadeOut ([speed], [much], [fn])
By the change of the opacity of all matched elements fade out effect, after completion of the animation and optionally trigger a callback function,
This animation only adjust the opacity element, that is to say, all of the matched elements of height and width will not change
- fadeIn ([speed], [much], [fn])
By the change of the opacity of all matched elements fade-in effect, after completion of the animation and optionally trigger a callback function,
This animation only adjust the opacity element, that is to say, all of the matched elements of height and width will not change,
- fadeToggle ([speed], [much], [fn])
Through changing the opacity of all matched elements to switch fade in and fade out effect, after completion of the animation, and optionally trigger a callback function,
This animation only adjust the opacity element, that is to say, all of the matched elements of height and width will not change
Parameter description:
The speed of speed: show/hide effect, default is "0" milliseconds, the possible values: missile, normal, fast, "
Much: (Optional) is used to specify switching effects, the default is "swing", "linear" available parameter
Fn: in the function to be executed by the animation is completed, each element performs a
Opacity: transparency
- fadeTo (speed, opacity, [much], [fn])//0 ~ 1
The opacity of all matched elements with gradual adjustment to the specified opacity and after completion of the animation and optionally trigger a callback function,
This animation only adjust the opacity element, that is to say, all of the matched elements of height and width will not change
The effect of the fade out
The function fadeOutFun () {
$(" wrap "). The fadeOut ();
}
The effect of fading in
The function fadeInFun () {
$(" wrap "). FadeIn ();
}
Fade in/out effect switch
The function fadeToggleFun () {
$(" wrap "). FadeToggle (1000);
}
Change the transparency of element
The function fadeToFun () {
$(" wrap "). FadeTo (1000,0.5);
}
1.3 the 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,
*/
//1.1 parameter declaration
/*
Param parameter of special note: pay special attention to all the animation attributes must be digital, unless otherwise specified.
These attributes if not Numbers will not be able to use basic jQuery function, such as common and borderWidth, margin, padding,
Width, height, fontSize, left, top, right, bottom, wordSpacing etc. These are all can produce animation
Background - color obviously can't, because the value of the parameter is red or GBG unless with plug-ins, otherwise under normal circumstances is not only the animation effects,
Note that writing CSS styles to use DOM attributes (such as "fontSize") to set up, if you want to use "the font - size" you need to add double quotation marks,
Special note: unit, the attribute value of unit pixels (px), unless otherwise specified, the unit em and % need to specify the use
The animate ({
Left: 50,
Width: '50 px'
Opacity: 'show',
FontSize: "10 em,"
}, 500);
In addition to defining values, each property can use the 'show', 'hide' and 'toggle', these shortcuts allow custom hide and show the animation is used to control elements of the show or hide the
The animate ({
Width: "toggle"
});
If you provide a begins with a + or -==value, then the target is to the current value of this attribute is calculated on the basis of plus or minus the given number of
The animate ({
Left: '50 px +='
}, "missile");
CodePudding user response:
CodePudding user response:
