Events and animations in jQuery and jQuery event animations

Events and animations in jQuery and jQuery event animations

Chapter 5

Events and animations in jQuery

Skills objective of this chapter

Use common simple events to create webpage Special Effects

Use a mouse event to create a special effect for the main navigation

Use keyboard and Keyboard Events to create form Effects

Use the hover () method to create a drop-down box menu Effect

Create a dialog box with mouse events and animations

1. Events in jQuery

Basic events

Syntax:

Event name = "function name ()";

Typical event methods in jQuery

Typical event Methods

A single-host event click (fn) occurs when a single-host mouse is clicked, and fn represents a function.

When keydown (fn) is triggered by pressing the keyboard, fn (function)

The focus event blur (fn) is lost, and the fn (function)

1. Window event:

For example, when a webpage is opened, the page is loaded, the window is closed, the window size is adjusted, the window is moved, and other operations, such as the document readiness event, the corresponding method is ready.

2. Keyboard Events:

Common mouse events

Method description execution time

When a click () trigger or function is bound to the click Event of a specified element

Mouseover () trigger or bind the function to the mouseover event of the specified element. The mouse pointer is outdated.

When Mouseout () is triggered or the mouse pointer is removed from the mouseout event where the function is bound to the specified Element

 

3. Keyboard Events

Common Keyboard Events

Method description execution time

When Keydown () is triggered or the function is bound to the keydown event of the specified element, press the key.

When Keyup () is triggered or the function is bound to the keyup event of the specified element, release the button.

When Keypress () is triggered or the function is bound to a keypress event of the specified element to generate printable characters

 

Keyboard event example:

$ ("Input"). keydown (function (event ){

If (event. keyCode = 13 ){

Alert ("You press ENTER !");

}

});

 

4. Form Events

Common form event Methods

Method description execution time

When Focus () is triggered or the function is bound to the focus event of the specified element to obtain the Focus

When Blur () triggers or binds a function to a blur event of a specified element, the focus is lost.

 

Keyboard event example:

$ (Function (){

$ ("Input"). focus (function (){

Watermark (this).css ('background', 'red ');

});

$ ("Input"). blur (function (){

Watermark (this).css ('background', 'white ');

});

});

Bind and remove events

1. Bind events

Syntax: bind (type, [data], fn)

The Bind () method has three parameters. The data parameter is not a required description:

Bind () method parameter description

Type Definition description

The Type event types mainly include basic events such as blur, focus, click, mouseout, and user-defined events.

[Data] An optional parameter is an additional data object that is passed to the event object as the event. data Attribute value. This parameter is optional.

Fn handler used to bind the Handler

 

1. Bind a single event

If you need to complete the single-host button to add a red background to all <p> elements, you can use click () or bind (). The bind method is used to complete this function.

 

$ (Function (){

$ ("Input"). bind ("click", function (){

((“P”).css ("background", "red ");

});

});

 

2. associate a colleague with multiple events

$ (Function (){

$ ("Input"). bind ({

Mouseover: function (){

((“Ul”).css ('background', 'red ');

}

Mouseout: function (){

((“Ul”).css ('background ', 'white ');

}

});

});

 

3. Remove events

Removing events is relative to binding events. In jQuery, you can use the unbind method to remove a single or multiple elements for matching elements.

Syntax:

Unbind ([type], [fn]).

The Unbind method has two parameters, both of which are optional. If there is no parameter, all events are removed,

UnBind () method parameter description

Type Definition description

[Type] event types include: blur, focus, click, mouseout, and other events. They can be custom events.

[Fn] processing functions are used to access bound processing functions.

For example:

$ ("Input"). unbind ({mouseover: t1 });

Composite event

There are two composite event hover () and toggle () methods in jQuery.

These two methods are similar to the ready () method and are all jQuery-defined methods.

1. hover () method

The Hover () method is used to simulate mouse pointer Hover events.

Syntax: hover (enter, leave );

$ (Function (){

$ ("Input"). hover (function (){

$ ("Ul"). show ();

}), Function (){

$ ("Ul"). hide ();

}

});

2. toggle () method

In jQuer, the toggle () method is used to simulate the mouse continuous click event. The first single-host element triggers the specified first function (fn1), the second function (fn2 ), the third (fn3), and so on (more). Then, each single machine repeats the calls of these functions.

Syntax of the Toggle () method:

Toggle (fn1, fn2, fn3 );

Example:

$ (Functoin (){

$ ("Body"). toggle (

Function (){

Certificate (this).css ('backgorund ', 'red ');

},

Function (){

Expires (this).css ('backgorund ', 'blue ');

},

Function (){

Certificate (this).css ('backgorund ', 'white ');

}

);

});

Animation in jQuery

Display and hide control elements

1. Control Element display

Syntax: $ (selector). show ([speed], [callback]);

Parameters of Show () and hide ()

Parameter description

(Optional) specifies the speed from hiding to full visibility. The default value is 0;

Speed value: Millisecond (for example, 1000)

When the element is set to lost, the height, width, internal and external margins, and transparency of the element are gradually changed from hidden to completely visible.

Callback (optional) indicates the function to be executed after the show function is executed.

 

2. Hide control elements

In jQuery, the show method corresponds to the hide method.

The Hide method is used for hiding (you can control the hiding speed of elements)

Syntax:

$ (Selector). hide ([speed], [callback]);

Its parameters are the same as those of the show method. The first one is

Hiding speed. The second is the function called after hiding.

3. Switch the visible state of the element

$ (Function (){

$ ("Input"). click (function (){

// Other Code omitted

$ ("Li: gt (5): not (: last)"). toggle ();

});

});

The intermediate code only hides the intermediate code.

Change element transparency

1. fade in and out of control elements

The control element fades out using fadeout

Control Elements fade in using fadein

Syntax:

Fadein: $ (selector). fadein ([speed], [callback]);

Fadeout: $ (selector). fadeout ([speed], [callback]);

Parameters of Fadeout () and fadein ()

Parameter description

(Optional) specifies the speed from hiding to full visibility. The default value is 0;

Speed value: Millisecond (for example, 1000)

When the settings are lost, the elements are slowly transparent or displayed.

Callback (optional) indicates the function to be executed after the show function is executed.

This parameter cannot be set unless the speed parameter is set.

Change the height of an element

The method used to change the height of an element is slideup and slidedown.

If an element is hidden, when the slidedown method is called to display the element, the element is displayed from top to bottom, while the slideup method is opposite, the element is displayed from bottom to top.

Shorten to hide

 

Summary

1. jQuery provides a series of basic binding methods, such as the click () method. It supports binding window events, mouse events, Keyboard Events, form events, and other basic events.

2. The bind () method can be used to bind one or more time processing methods at a time. The unbind () method can be used to remove event binding.

3. In jQuery, composite event methods such as hover () and toggle () are provided.

4. in jQuery, a series of methods are provided to display the animation effect. The show () method controls the display of elements, the hide () method hides, and the toggle () method is used to switch the visible state of elements, use the fadein () method and the fadeout () method to fade out elements, and use the slideup (0 method and slidedown () method to shrink and expand elements.

 

This chapter is complete!