Document-ready Functions
$ (Document). ready (function (){
--- JQuery functions go here ----
});
This is to prevent the document from running jQuery code before it is fully loaded (ready.
If you run the function before the document is fully loaded, the operation may fail. (Try to hide a nonexistent element; get the size of an incomplete image)
Place all jQuery code in the event processing function
Place all event processing functions in the document-ready event Processor
Hide/show/toogle
$ (Selector). hide (speed, callback );
$ (Selector). show (speed, callback );
$ (Selector). toggle (speed, callback );
The optional speed parameter specifies the hidden/display speed. The value can be "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after the function is hidden, displayed, or switched.
JQuery events
Event Function |
Bind a function |
$ (Document). ready (function) |
Bind the function to the ready event of the document (when the document is loaded) |
$ (Selector). click (function) |
Click events that trigger or bind a function to the selected Element |
$ (Selector). dblclick (function) |
Double-click event that triggers or binds a function to the selected Element |
$ (Selector). focus (function) |
Events that trigger or bind a function to the retrieved focus of the selected Element |
$ (Selector). mouseover (function) |
A mouse hover event that triggers or binds a function to the selected element. |
JQuery Fading method:
JQuery allows you to fade in and out elements.
JQuery has the following four fade methods:
- FadeIn ()
- FadeOut ()
- FadeToggle ()
OptionalThe speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.OptionalThe callback parameter is the name of the function executed after fading is complete.
The jQuery fadeTo () method allows gradient to be a given opacity (value between 0 and 1 ).
$ (Selector). fadeTo (speed, opacity, callback );
RequiredThe speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
RequiredThe opacity parameter sets the fade-in and fade-out effect to the specified opacity (value between 0 and 1 ).
OptionalThe callback parameter is the name of the function executed after the function is completed.
Because JavaScript statements (commands) are executed one by one, the animated statements may produce errors or page conflicts in order, because the animation is not completed yet.
To avoid this problem, you can add the Callback function as a parameter. If you want to execute a statement after an animation function, use the callback function.