Events and animations in jquery

1. Mouse events

Method describes the timing of the execution

Click () triggers or binds a function to the clicked event of the specified element when the mouse clicks
MouseOver () MouseOver event that triggers or binds a function to a specified element the mouse pointer is moved out of date
Mouseout () triggers or binds a function to the Mouseout event of the specified element when the mouse pointer moves out
MouseEnter () triggers or binds a function to the MouseEnter event of the specified element when the mouse pointer enters
MouseLeave () Touch or bind a function to the MouseLeave event of the specified element when the mouse pointer leaves

2. Keyboard events

Method Execution Timing Description

KeyDown () triggers or binds a function to the KeyDown event of the specified element when the keyboard is pressed

KeyUp () triggers or binds a function to the KeyUp event release key of the specified element

KeyPress () triggers or binds a function to the KeyPress event of a specified element to produce a printable character

----------------Browser Events
Resize () sizing

-----------------------
3. Event Binding
To bind multiple events:

$ (DOM). Bind ({mouseover:function () {},mouseout:function () {}});

　　

To unload a partial event:
Unbind ("A B C")

On

When Unbind () does not take arguments, it means that all the events bound are removed

3. Composite Events

Hover () method

The first Topdown is the trigger when the cursor is moved, and the second Topdown is the trigger when the cursor moves out .

$ (". Top-m. On"). Hover (function () {$ (". Topdown"). Show ();          },         function () {$ (". Topdown"). Hide ();         });

Toggle () method

$ ("input"). Toggle (        function () {$ ("body"). CSS ("Background", "#ff0000");},         function () {$ ("body"). CSS (" Background "," #00ff00 ");},          function () {$ (" body "). CSS (" Background "," #0000ff ");}    )

　　

Toggle () and Toggleclass () summary
Toggle (Fn1,fn2 ...) Enables click events to be toggled without the need for additional bindings click events
Toggle () Implements the event trigger object to toggle between the display and the hidden state
Toggleclass () Implements an event trigger object to toggle between loading a style and removing a style

Event: triggered by xxx
Event: An action that triggers something and performs an effect
Event: This event is executed by an action to return a result
Event: The object that triggered the event, associated with the method that handles the event.

4. Custom animations
$ ("[Type=button]"). Bind ("click", Function () {
Queue:
$ ("div")
. Animate ({"font-size": "50px"},2000,function () {alert (' AA ');})
. Animate ({"width": "200px"},{Queue:false, duration:2000});
});
Queue: Joins the queue, with the default value of True. Wait for the first animation to complete before you finish the second animation

Animate ({CSS style},{duration=3000,queue:false});

5.show () and Hide ()

Show () control element Display, hide () control element hidden

6.slideDown () and Slideup ()

Slidedown () allows elements to be progressively extended to display
Slideup () makes the elements progressively shorter until they are hidden

$ (document). Ready (function () {       $ ("H2"). Click (function () {   $ (". txt"). Slideup ("slow")   ; $ (". txt"). Slidedown ("slow");       }); });

　　

7.fadeIn () and fadeout ()

FadeIn () and fadeout () can fade effects by changing the transparency of elements

Events and animations in jquery