Home > front end >  JQuery animations
JQuery animations

Time:12-27

Shows the effect of jQuery
- 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:
The speed of speed: show/hide effect, default is "0" milliseconds, the possible values: missile (600), normal, fast (200), "
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
Description: by style property control elements to hide and display, the display value of the parameter that can refer to the jQuery API

The effectiveness of sliding in the jQuery
- 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, the
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 at the completion of a hidden trigger a callback function, the
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 of jQuery
- 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 custom jQuery 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 to achieve

- the animate (params, [speed], [much], [fn]) is used to create a custom animation function,
This function is the key to specify the animation form style attributes object, and the results of each attribute in this object said a can change the style of the
Properties (e.g., "height", "top" or "opacity"), note: all the specified attribute must be in the form of a camel, such as use marginLeft
Instead of 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 attributes will
From the current value of the gradient to the specified value, if you are using "hide", "show" or "toggle" such a string value, will be for the
Attribute to invoke the default animation form,
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,
The parameter declaration:
Param parameter of special note: pay special attention to all the animation attributes must be digital, unless otherwise stated, these attributes attribute values
If not Numbers will not be able to use basic jQuery function, such as common and borderWidth, margin, padding and width,
Height, fontSize, left, top, right, bottom, wordSpacing borderRadius etc. These are all can produce animation effect
Fruit, background, color obviously can't, because the value of the parameter is red or GBG such normal, unless with plug-in
Is not only the animation effects, note, 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 %
You need to specify the use

CodePudding user response:

  • Related