Event and animation effects in jquery

Just learned some of Jqyery's events and animations, let me summarize:

1. Base Events

1.window event, its corresponding method is ready (), $ (document). The make () method is the most important function in the event module, which can greatly improve the response speed of the Web application. (Don't do too much explaining)

2. Mouse events

Mouse events are actions that are raised when a user moves or clicks on a document.

1.click ();

2.mouseout ();

3.mouseout ();

$ (function () {$ ('Li'). On ('MouseEnter', Function () {$ ( This). CSS ('background','Pink'); }). On ('mouseout', Function () {$ ( This). CSS ('background',""); })            $("Li"). Off ("mouseout"); })

The above code shows the mouse events.

3. Keyboard events

Methods are: KeyDown () KeyUp () KeyPress ()

$ (document). KeyDown (function (event)) {if(event. keycode==' )  - ' )}

4. Form Events

Form events are one of the most stable types in all events and support the most stable events.

The focus event is triggered when the element receives focus, and the Blur event is triggered by the loss of focal point.

Let me write an example below.

  "  [name=zh]   ). focus (function () { $ ( "  myclass   "   [name=zh]   " ". blur (Function () {$ ( this). Removeclass ( "  '  ); }) })

Getting the focus will change color, and Blur will remove the added element.

5. Binding events and removing events

In jquery binding one or more events can be equivalent using bind () or on () 2, it is recommended to use on (), the Remove event can use Unbind () or off ().

Example:

$ (function () {$ ('Li'). On ('MouseEnter', Function () {$ ( This). CSS ('background','Pink'); }). On ('mouseout', Function () {$ ( This). CSS ('background',""); })            $("Li"). Off ("mouseout"); })

6. Composite Events

Composite event methods in jquery: hover () and toggle ()

The function of the hover () method is to simulate a mouse hover event that triggers the first function when the mouse moves over the element, which triggers the second function when the mouse moves out of the element and MouseOver mouseout.

Code:

$ ('#mum'). Hover (function () {$ (#mu). CSS ("display" ,"block");},function () {$ (#mu). CSS ("display" ,"none");} );

Toggle () Simulates a mouse continuous click event first click on an element, triggering the first function, clicking on the same element will trigger the second function

The code, like the hover (), does not show too much.

Finally, I'm talking about the animation in jquery.

Control element Display and hide

1. Control element Display

Syntax: $ (selector). Show ([Speed],[callback])

2. Element hiding

Syntax: $ (selector). Hide ([Speed],[callback])

The above 2 grammars allow the elements to be displayed and hidden freely.

Change element transparency

1 Control element Fade in

2 Control element Fade out

Fade-in Syntax: $ (selector). FadeIn ([],[])

Fade out Syntax: $ (selector). FadeOut ([],[])

The code is as follows:

$ (function () {$ ("[Type=button]"). Bind ("Click", Function () {$ ("Div"). Animate ({borderWidth:Ten               },  the). Animate ({fontSize:"50px",}, {queue:false, Duration: the }); })       })

Note: queue refers to whether queues, Fales is false, so that several animations will be executed together, do not appear to execute an element before executing the next element.

Event and animation effects in jquery