Introduction to jquery changing style and animation effects

Change Style

CSS (NAME|PRO|[,VAL|FN]) return value: String

Accesses the style properties of the matching element.

Parameters
Name String to access the property names

Properties Map name/value pairs to be set as style properties

Name,value String, Number property name, property value

Name,function (index, value) String,function 1: Property name 2: This function returns the value of the property to be set. Accepts two parameters, index is the index position of the element in the object collection, and value is the original property value.

Example

The parameter name describes:

Gets the value of the color style property of the first paragraph.

JQuery Code:
$ ("P"). CSS ("color");

Parameter Properties Description:

Sets the font color for all paragraphs to red and the background to blue.

JQuery Code:
$ ("P"). CSS ({color: "#ff0011", Background: "Blue"});

Parameter Name,value Description:

Set all paragraph fonts to red

JQuery Code:
$ ("P"). CSS ("Color", "red");

Parameter name, callback function Description:

Gradually increase the size of the DIV

JQuery Code:
$ ("div"). Click (function () {
$ (this). CSS ({
Width:function (Index, value) {
return parsefloat (value) * 1.2;
},
Height:function (Index, value) {
return parsefloat (value) * 1.2;
}
});
});

CSS classes
1.addClass (CLASS|FN)

Adds the specified class name for each matching element.

Parameters

Class String one or more CSS class names to add to the element, separated by a space

function (Index, Class) functions This function must return one or more space-delimited class names. Accepts two parameters, the index parameter is the indexed value of the object in this collection, and the class parameter is the original class attribute value of the object.

Example

Parameter class Description:

Add the ' selected ' class to the matched element

JQuery Code:
$ ("P"). AddClass ("selected");
$ ("P"). addclass ("selected1 selected2");

callback function Description:

Add a different class to Li

HTML Code:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
JQuery Code:
$ (' ul Li:last '). addclass (function () {
Return ' item-' + $ (This). index ();
});

2.removeClass ([CLASS|FN]) Overview Removes all or the specified classes from all matching elements. Parameter class String one or more CSS class names to delete, separated by a space

Functions (Index, Class) This function must return one or more space-delimited class names. Accepts two parameters, the index parameter is the indexed value of the object in this collection, and the class parameter is the original class attribute value of the object.

Example

Parameter class Description:

Remove the ' selected ' class from the matching element

JQuery Code:
$ ("P"). Removeclass ("selected");

Parameter class Description:

Delete all classes of matching elements

JQuery Code:
$ ("P"). Removeclass ();

callback function Description:

Removes the last duplicate class from the previous element

JQuery Code:
$ (' Li:last '). Removeclass (function () {
return $ (this). Prev (). attr (' class ');
});

3.toggleClass (CLASS|FN[,SW]) return value: JQuery Deletes (adds) a class if it exists (does not exist).

Parameters
Class String CSS Classes name

Class,switchstring,boolean 1: The CSS class name to toggle. 2: A Boolean value that determines whether an element contains a class.

Switchboolean A Boolean value that determines whether an element contains a class.

Functions (Index, Class,switch) [, switch] Function,boolean 1: A function that returns the name of the style class used to toggle on each element in the matching element collection. Receives the index position of the element and the element's old style class as an argument. 2: A Boolean value that is used to determine whether the style class is added or removed.

Example

Parameter class Description:

Toggle the ' selected ' class for matching elements

jQuery Code :
$ ("P"). Toggleclass ("selected");
Parameter Class,switch Description:

Add a ' highlight ' class to three clicks per click

HTML Code:
<strong>jquery Code:</strong>
JQuery Code:
var count = 0;
$ ("P"). Click (function () {
$ (this). Toggleclass ("Highlight", count++% 3 = = 0);
});

callback function Description:

To set the class property based on the parent element

JQuery Code:
$ (' Div.foo '). Toggleclass (function () {
if ($ (this). Parent (). is ('. Bar ') {
return ' happy ';
} else {
Return ' sad ';
}
});

Animation effects
Basic
Show ([SPEED,[EASING],[FN]])

Shows hidden matching elements.

This is the ' Show (speed, [callback]) ' version without animations. If the selected element is visible, this method will not change anything. This method will work regardless of whether the element is hidden through the Hide () method or Display:none is set in the CSS.

Parameters
Speed[,fn]number/string,functionv1.0speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

fn: The function that executes when the animation is complete, once for each element.

[Speed],[easing],[fn]number/string,string,functionv1.4.3speed: A string of three predetermined speeds ("slow", "normal", or "fast") Or a millisecond value that represents the duration of the animation (for example: 1000)

Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"

fn: The function that executes when the animation is complete, once for each element.

Example

1. Description: Show all paragraphs

HTML Code:
<p style= "Display:none" >Hello</p>

JQuery Code:
$ ("P"). Show ()

2. Description: Use slow animation to show hidden paragraphs, lasting 600 milliseconds.

HTML Code:
<p style= "Display:none" >Hello</p>

JQuery Code:
$ ("P"). Show ("slow");

3. Description: The hidden paragraphs are displayed with a quick animation, lasting 200 milliseconds. And then execute the feedback!

HTML Code:
<p style= "Display:none" >Hello</p>

JQuery Code:
$ ("P"). Show ("Fast", function () {
$ (this). Text ("Animation done!");
});

Describe:
Show hidden paragraphs for almost 4 seconds ... And then perform a feedback ...

HTML Code:
<p style= "Display:none" >Hello</p>

JQuery Code:
$ ("P"). Show (4000,function () {
$ (this). Text ("Animation-Done ...");
});

Hide ([SPEED,[EASING],[FN])

Hide the displayed elements

This is the no animated version of ' Hide ' (speed, [callback]). If the selected element is hidden, this method will not change anything.

Parameters
Speed[,fn]number/string,function Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example:.) FN: A function that executes when the animation is complete , each element executes once.

[Speed],[easing],[fn]number/string,string,function Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation ( Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear" fn: the function that executes when the animation completes, each element executes once.

Example Description: Hide all paragraphs

JQuery Code:
$ ("P"). Hide ()

Description: Use 600 milliseconds to slowly hide the paragraph

JQuery Code:
$ ("P"). Hide ("slow");

Description: Quickly hides the paragraph in 200 milliseconds and then pops up a dialog box.

JQuery Code:
$ ("P"). Hide ("Fast", function () {
Alert ("Animation done.");
});

Toggle ([SPEED],[EASING],[FN])

return value: JQuery

Used to bind two or more event handler functions in response to a rotating click event of the selected element.

If the element is visible, toggle to hidden, or toggle to visible if the element is hidden.

Parameters
Fn,fn2,[fn3,fn4,...] function,.... fn: functions to be executed the first few clicks. FN2: The function to be executed when the second number of hits is clicked. FN3,FN4,...: The function to be executed more than once when clicked.

[Speed] [, FN] String,function speed: Hides/shows how fast the effect is. The default is "0" milliseconds. Possible values: Slow,normal,fast. "FN: a function that executes when the animation is complete, once for each element."

[Tempo], [easing], [FN] string,string,function speed: Hide/show the velocity of the effect. The default is "0" milliseconds. Possible values: Slow,normal,fast. The easing: (Optional) is used to specify the toggle effect, which is "swing" by default, with the parameters "linear" fn: functions executed at the completion of the animation, once per element.

The switch Boolean is used to determine which switches are displayed/hidden. True-display element, false-hide element

Example no parameter description: Toggle Show/hide for table

JQuery Code:
$ (' TD '). Toggle ();

FN,FN2 Description: Switch A class to a table

JQuery Code:
$ ("TD"). Toggle (
function () {
$ (this). AddClass ("selected");
},
function () {
$ (this). Removeclass ("selected");
}
);

Speed Description:
Slowly toggle the paragraph display state in 600 milliseconds

JQuery Code:
$ ("P"). Toggle ("slow");

SPEED,FN Description: Use 200 milliseconds to quickly toggle the display state of the paragraph, then a dialog box pops up.

JQuery Code:
$ ("P"). Toggle ("Fast", function () {
Alert ("Animation done.");
});

Switch parameter Description: If this parameter is true, then the matching element will be displayed, if False, the element is hidden

JQuery Code:
$ (' #foo '). Toggle (Showorhide);

Equivalent
if (showorhide) {
$ (' #foo '). Show ();
} else {
$ (' #foo '). Hide ();
}

Sliding
1.slideDown ([SPE],[EAS],[FN])

return value: Jqueryslidedown ([SPEED],[EASING],[FN])

Dynamically display all matching elements by a height change (increase downward), optionally triggering a callback function after the display is complete.

This animation effect only adjusts the height of the element, allowing the matching elements to be displayed in a "sliding" manner. In jquery 1.3, the upper and lower padding and margin will also be animated, with smoother results.

Parameters
Speed[,fn]number/string,functionv1.0speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

fn: The function that executes when the animation is complete, once for each element.

[Speed],[easing],[fn]number/string,string,functionv1.4.3speed: A string of three predetermined speeds ("slow", "normal", or "fast") Or a millisecond value that represents the duration of the animation (for example: 1000)

Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"

The function that FN executes when the animation is complete, once for each element.

Example Description: Slide to display hidden <p> elements:

JQuery Code:
$ (". Btn2"). Click (function () {
$ ("P"). Slidedown ();
});

Description: Slide the paragraph down slowly in 600 milliseconds

JQuery Code:
$ ("P"). Slidedown ("slow");

Description: Slide the paragraph down quickly with 200 milliseconds, then a dialog box pops up

JQuery Code:
$ ("P"). Slidedown ("Fast", function () {
Alert ("Animation done.");
});

2.slideUp ([SPEED,[EASING],[FN]]) dynamically hides all matching elements by a height change (decrease up), optionally triggering a callback function after the hide is complete.
This animation effect only adjusts the height of the element, allowing the matching elements to be hidden in a "sliding" manner. In jquery 1.3, the upper and lower padding and margin will also be animated, with smoother results.

Parameters
Speed[,fn]number/string,functionspeed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

fn: The function that executes when the animation is complete, once for each element.

[Speed],[easing],[fn]number/string,string,functionspeed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation ( Example: 1000)

Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"
fn: The function that executes when the animation is complete, once for each element.

Example
Description: Slide the paragraph slowly in 600 milliseconds

jQuery Code:
$ ("P"). Slideup ("slow"); Description:
Use 200 milliseconds to quickly slide the paragraph over, then a dialog box pops up


jQuery Code:
$ ("P"). Slideup ("Fast", function () {
Alert ("Animation done.");
});

3.slideToggle ([SPEED],[EASING],[FN]) Toggles the visibility of all matching elements through a height change and optionally triggers a callback function after the switch is complete.
This animation effect only adjusts the height of the element, allowing the matching elements to be hidden or displayed in a "swipe" manner. In jquery 1.3, the upper and lower padding and margin will also be animated, with smoother results.

parameters
Speed[,fn]number/string,functionSpeed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

fn: The function that executes when the animation is complete, once for each element.


[Speed],[easing],[fn]number/string,string,functionSpeed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)
Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"
fn: The function that executes when the animation is complete, once for each element.

Example
Description: Slide the paragraph up or down slowly in 600 milliseconds

jQuery Code:
$ ("P"). Slidetoggle ("slow");
Description: Use 200 milliseconds to quickly slide the paragraph up or down, then a dialog box pops up

JQuery Code:
$ ("P"). Slidetoggle ("Fast", function () {
Alert ("Animation done.");
});

Fade in and fade

1.fadeIn ([SPEED],[EAS],[FN]) fades all matching elements by changing the opacity, and optionally triggers a callback function after the animation is complete. This animation only adjusts the opacity of the element, meaning that the height and width of all matching elements do not change.


Parameters

[Speed],[easing],[fn]number/string,string,function
Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)
Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"
fn: The function that executes when the animation is complete, once for each element.


Example
Description: Fade a paragraph slowly in 600 milliseconds


JQuery Code:
$ ("P"). FadeIn ("slow");
Description: Quickly fades a paragraph in 200 milliseconds, then pops up a dialog box

JQuery Code:
("P"). FadeIn ("Fast", function () {
Alert ("Animation done.");
});

2.fadeOut ([SPEED],[EAS],[FN])

The fade-out effect of all matching elements is achieved by changing the opacity, and optionally triggering a callback function after the animation is complete.

This animation only adjusts the opacity of the element, meaning that the height and width of all matching elements do not change.

Parameters
[Speed],[easing],[fn]number/string,string,function

Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"

fn: The function that executes when the animation is complete, once for each element.

Example Description: Fade a paragraph slowly in 600 milliseconds

JQuery Code:
$ ("P"). FadeOut ("slow"); Description:

Fade the paragraph quickly with 200 milliseconds, then pop up a dialog box

JQuery Code:
$ ("P"). FadeOut ("Fast", function () {
Alert ("Animation done.");
});

3.fadeTo ([[SPE],OPA,[EAS],[FN]])

Adjusts the opacity of all matching elements incrementally to the specified opacity, and optionally triggers a callback function after the animation is complete.

This animation only adjusts the opacity of the element, meaning that the height and width of all matching elements do not change.

Parameters
[Speed],opacity,[easing],[fn]number/string,string,function

Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

Opacity: A number that represents transparency between 0 and 1.

Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"

fn: The function that executes when the animation is complete, once for each element.

Example: Use a fade-in effect to display a hidden <p> element:

JQuery Code:
$ (". Btn2"). Click (function () {
$ ("P"). FadeIn ();
});

Description: Adjusts the transparency of the paragraph to 0.66 with a slow 600 millisecond, about 2/3 of the visibility

JQuery Code:
$ ("P"). FadeTo ("Slow", 0.66);

Description: Use 200 milliseconds to quickly adjust the transparency of the paragraph to 0.25, about 1/4 of the visibility, and then pop up a dialog box

JQuery Code:
$ ("P"). FadeTo ("Fast", 0.25, function () {
Alert ("Animation done.");
});

4.fadeToggle ([SPEED,[EAS],[FN]])

Switches the fade-in and fade-out effects of all matched elements with opacity changes, and optionally triggers a callback function after the animation is complete.

This animation only adjusts the opacity of the element, meaning that the height and width of all matching elements do not change.

Parameters

[Speed],[easing],[fn]number/string,string,functionv1.4.4speed: A string of three predetermined speeds ("slow", "normal", or "fast") Or a millisecond value that represents the duration of the animation (for example: 1000)

Easing: (Optional) is used to specify the toggle effect, the default is "Swing", the available parameters "linear"

fn: The function that executes when the animation is complete, once for each element.

Example Description: Fade a paragraph slowly in 600 milliseconds

JQuery Code:
$ ("P"). Fadetoggle ("Slow", "linear");

Description: Quickly fades a paragraph in 200 milliseconds, then pops up a dialog box

JQuery Code:
$ ("P"). Fadetoggle ("Fast", function () {
Alert ("Animation done.");
});