JQuery Events and animations

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.