JQuery Events and animations

JQuery Events and animations

　On the last mention of the jquery selector, we should know that the use of jquery can let us write a lot less code to achieve a lightweight effect, then since all have selectors and so convenient, then the use of events is certainly not possible, but also add a series of animation effects, Let's take a look at it!!

　　

Event Handling

Directly binds the specified event, and the event type is the method name, which supports click,focus, Blur,submit , and so on.

$ ("#button"). Click (function () {

Script goes here

});

Use on to bindthe event,off to unbind the event, the first parameter is the event name, and the second parameter is the callback function. 1.7.2 version starts to support.

$ ("#button"). On (' click ', function () {

Script goes here

});

In 1.7.1 or earlier, you need to use bind/unbind(Regular binding),Live/die (pre-bind) to Replace on/off.

For more details, see the Events section of the jQuery API .

JQuery also supports the following methods :

The. blur () Form element loses focus.

the value of the. Change () Form element changes

The. Click () mouse click

. DblClick () mouse double-click

. focus () form elements get focus

. Focusin () child elements get focus

. Focusout () child element loses focus

. Hover () specifying handler functions for both MouseEnter and mouseleave Events

. KeyDown () Press the keyboard (long time keys, return only one event)

. KeyPress () Press the keyboard (long-time keys will return multiple events)

. KeyUp () release the keyboard

The. Load () element is finished loading

. MouseDown () Press the mouse

. MouseEnter () Mouse entry (Enter child element does not trigger)

. MouseLeave () Mouse away (leave child element not triggered)

. MouseMove () mouse moves inside an element

. mouseout () Mouse away (leave child element also triggered)

. MouseOver () Mouse entry (enter child element also triggered)

. MouseUp () release the mouse

. Ready () DOM loading complete

The size of the. Resize () browser window has changed

The position of the. Scroll () scroll bar is changed

The. Select () user selects the contents of the text box

. Submit () User Submission Form

. Toggle () run multiple functions in sequence based on the number of mouse clicks

. Unload (). occurs when the user leaves the page Unload event.

Dynamic Effects

jquery$ ("#msg"). Show ("Fast");

$ ("#msg"). Hide ("slow");

$ ("#msg"). FadeIn ();

$ ("#msg"). FadeOut ();

Fade in and fade

$ (selector). FadeIn (Speed,callback);

The optional speed parameter specifies the length of the effect. It can take the following values:"Slow","Fast" , or milliseconds.

The optional callback parameter is the name of the function that is executed after fading completes.

Sliding

$ (selector). Slidedown (Speed,callback);

The optional speed parameter specifies the length of the effect. It can take the following values:"Slow","Fast" , or milliseconds.

The optional callback parameter is the name of the function that is executed after the slide is completed.

Animation

$ (selector). Animate ({params},speed,callback);

The required params parameter defines the CSS property that forms the animation .

The optional speed parameter specifies the length of the effect. It can take the following values:"Slow","Fast" , or milliseconds.

The optional callback parameter is the name of the function that is executed after the animation is completed.

The code above implements the fade- in and fade-out of a jQuery object with ID Msg . Functions accept the parameters in addition to speed and so on, you can also receive the shaping, as the fade in or fade out of the completion time, in units of Ms. For more details, see the Effects section of the jQuery API .

JQuery Events and animations