jquery Styles and animations

First, modify the inline CSS

1). CSS () method

To get the value of a style property, you can pass a property name as a string for the method, and then get the same property value as a string. To get the values of multiple style attributes, you can pass in an array of property names, resulting in an object that consists of attributes and values. For attribute names such as backgroundcolor that are made up of multiple words, jquery can interpret both the hyphen version of the CSS notation and the camel-case representation of the DOM.

Get the value of a single attribute:. CSS (' property ')

Get values for multiple properties:. CSS ([' property1 ', ' Property2 ')

To set properties:

Pass in a separate style and value:. CSS (' property ', ' value ');

Pass in an object consisting of a property-value pair:. css ({property1: ' value1 ', ' property2 ': ' value2 ',})

In jquery, the standard property name can be used directly, and if this attribute is not present in the Style object, jquery will sequentially detect all the attributes prefixed with the prefix (webkit,o, Moz, MS), and then use the first one found.

Second, the animation

1). Show (). Hide (). Toggle ( )

Can pass in the animation duration: ' Slow ' fast Number (600)

2)fadeIn () fadeOut () FadeTo ()

3) Slidedown () slideup () Slidetoggle ()

4) . Text ()

$ (' a '). Text (' Read more ')//Set text

Iii. Creating a Custom animation

1) . Animate () method

There are two kinds of forms:

1. Receive 4 parameters: an optional callback function that contains the style attributes and optional time-length parameters for the object optional

. Animate ({property1: ' value1 ', Property2: ' value2 '},
Duration,easing,function () {
Alert (' The animation is finished ');
})

2. Receive 2 Parameters: one Property object One option object

. Animate ({
Property1: ' value1 ',
Property2: ' value2 '
},{
Duration: ' Value ',
Easing: ' Value ',
specialeasing:{
Property1: ' Easing1 ',
Property2: ' Easing2 '
},
Complete:function () {
Alert (' The animation is finished ');
},
Queue:true,
Step:callback,
})

. Outerwidth () calculate width, including padding and border width

height: ' +=20px ' ' + = ' changes on the original basis 20 pixels

Iv. Concurrency and queueing effects

1. Working with a set of elements

When you apply multiple effects to the same set of elements, you can easily queue them by concatenating these effects

$ (' button ')
. FadeTo (' fast ', 0.5)
. Animate ({left: ' 10px '}, ' slow ')
. FadeTo (' Slow ', 1.0)
. Slideup (' slow ')
. Slidedown (' slow ')

1) Crossing the queue

The animation above is performed on one, and if some animations I want to execute together, you can simply combine them into one. Animate () method, but if you want to combine the duration of the two animations differently, then you have to use the second form of animation

$ (' button '). FadeTo (' fast ', 0.5). Animate (
{left:' 10px '},
{
Duration: ' Slow ',
Queue:false   //Set this option to False to have the current animation start at the same time as the previous one
}
). FadeTo (' slow ', 1.0). Slideup (' slow '). Slidedown (' slow ')

2) Manual Queue

The last thing to note about applying a queued effect to a set of elements is that the queue cannot be automatically applied to other non-effect methods, such as. css ()

Assuming the above program, I want to change the background color to red before slidedown, if directly in

. Slideup (' slow ')

. css ({backgroundcolor: ' Red '})

. Slidedown (' slow ')

The background color changes immediately and does not wait until other animations have finished executing.

One way to add a non-effect method to a queue is to use the. Queue () method.

$ (' button '). FadeTo (' fast ', 0.5). Animate ({left:' 10px '}, {duration:' Slow ', queue:false   }). FadeTo (' slow ', 1.0). Slideup (' slow ')
. Queue (function (next) {  //pass a callback function
$ (' button '). css ({backgroundcolor: ' red '});
Next ();  The next () method added will allow the queue to continue in place of interruption, and if you do not use next (), the animation is interrupted
}). Slidedown (' slow ')

3) callback function

$ (' button '). FadeTo (' fast ', 0.5). Animate ({left: ' 10px '}, {duration: ' Slow ', Queue:false    }) . FadeTo (' Slow ', 1.0). Slideup (' Slow ', function () {
$ (' P '). EQ (2). css ({backgorundcolor: ' red '}); With a callback function, you do not need to use next ()
}). Slidedown (' slow ')

2. Working with multiple sets of elements

$ (' button '). Click (function() {$ (' P '). EQ (2). Slideup (). Next (). Slidedown ();   . Next () represents the next sibling element})

At this point, the animation for the two paragraphs is executed simultaneously

If you want one of them to execute sequentially, you need to use the queued callback function

$ (' button '). Click (function() {$ (' P '). EQ (2). Slideup (' Slow ', function () {
$ (this). Next (). Slidedown ();     
})})

V. Generalization

1) effects on a set of elements

Occurs at the same time when applied in a. Animate () method with multiple attributes;

When applied in the form of a method concatenating, it occurs sequentially (queued effect)--unless the queue option value is false;

2) effects on multiple sets of elements

By default it happens at the same time;

When applied in another effect method or in the callback function of the. Queue () method, it occurs sequentially (queued effects).

jquery Styles and animations