Use the jquery animate method to hide and hide the mouse.

In jquery, animate () can dynamically modify the attribute values in css and create an animation effect, as long as we set the height or width at the time of creation.

Introduction to the animate Method

This method uses the CSS style to change an element from one state to another. The CSS attribute value is gradually changed, so that you can create an animation effect.

Only numeric values can be used to create animations (such as "margin: 30px "). The string value cannot be used to create an animation (for example, "background-color: red ").

Note: Use "+ =" or "-=" to create relative animations ).

Example 1. Show and hide the mouse

Css code

The Code is as follows:

Copy code

@ CHARSET "UTF-8 "; * Html. showbox, * html. overlay { Position: absolute; Top: expression(eval(document.doc umentElement. scrollTop )); } # AjaxLoading { Border: 1px solid #8 CBEDA; Color: # 37a; Font-size: 12px; Font-weight: bold; } # AjaxLoading div. loadingWord { Width: 180px; Height: 50px; Line-height: 50px; Border: 2px solid # D6E7F2; Background: # fff; } # AjaxLoading img { Margin: 10px 15px; Float: left; Display: inline; } . Overlay { Position: fixed; Top: 0; Right: 0; Bottom: 0; Left: 0; Z-index: 998; Width: 100%; Height: 100%; _ Padding: 0 20px 0 0; Background: # f6f4f5; Display: none; } . Showbox { Position: fixed; Top: 0; Left: 50%; Z-index: 9999; Opacity: 0; Filter: alpha (opacity = 0 ); Margin-left:-80px; }

Jquery code

The Code is as follows:

Copy code

/** * Loading an animation window * * @ Author dendy * @ Since 2013-7-19 10:13:05 */ Function getLoadingHtml (msg ){ If (! Msg) msg = "LOAD "; Var html = "<div id = 'loadingdiv '>" + "<Div style = 'height: 1325px; display: none; opacity: 0; 'class = 'overlay '> </div>" + "<Div style = 'opacity: 0; margin-top: 250px; 'id = 'ajaxloading' class = 'showbox'>" + "<Div class = 'loadingword'>" + "+ "</Div>" + "</Div>" + "<Div style = 'height: pixel PX; '> </div>" + "</Div> "; Return html; } Function ajaxLoadingInit (msg ){ Var loadingDiv = getLoadingHtml (msg ); Var h = $ (document). height (); $ (". Overlay" ).css ({"height": h }); Var div = $ ("body"). find ("# loadingDiv "); Div. remove (); $ ("Body"). append ($ (loadingDiv )); } /** * Start to display loading, called before ajax execution * @ Param msg operation message, "LOAD", "save", "delete" */ Function startLoading (msg ){ AjaxLoadingInit (msg ); $ (". Overlay" mirror.css ({'display': 'block', 'opacity ': '0. 8 '}); $ (". Showbox"). stop (true). animate ({'margin-top ': '300px', 'opacity ': '1'}, 200 ); } /** * Hide after loading, called after ajax execution is complete (complete) */ Function endLoading (){ $ (". Showbox"). stop (true). animate ({'margin-top ': '250px', 'opacity ': '0'}, 400 ); $ (". Overlay" mirror.css ({'display': 'none', 'opacity ': '0 '}); }

Definition and usage

Syntax 1
$ (Selector). animate (styles, speed, easing, callback)

Parameters

Styles
Required. Specifies the CSS style and value that produce the animation effect.
Possible CSS style values (for example ):
BackgroundPosition
BorderWidth
BorderBottomWidth
BorderLeftWidth
BorderRightWidth
BorderTopWidth
BorderSpacing
Margin
MarginBottom
MarginLeft
MarginRight
MarginTop
OutlineWidth
Padding
PaddingBottom
PaddingLeft
PaddingRight
PaddingTop
Height
Width
MaxHeight
MaxWidth
MinHeight
MinWidth
Font
FontSize
Bottom
Left
Right
Top
LetterSpacing
WordSpacing
LineHeight
TextIndent
Note: CSS styles are set using DOM names (such as "fontSize"), rather than CSS names (such as "font-size ").

Speed
Optional. Specifies the animation speed. The default value is "normal ".
Possible values:
Millisecond (e.g. 1500)
"Slow"
"Normal"
"Fast"

Easing
Optional. Specifies the easing function for setting the animation speed in different animation points.
Built-in easing functions:
Swing
Linear
More easing functions are provided in the extension plug-in.

Allback
Optional. The function to be executed after the animate function is executed.

Syntax 2
$ (Selector). animate (styles, options)

Styles is required. Specifies the CSS styles and values that generate the animation effect (same as above ).

Options
Optional. Specifies additional animation options.
Possible values:
Speed-set the animation speed
Easing-specifies the easing function to be used
Callback-specifies the function to be executed after the animation is completed
Step: Specify the function to be executed after each step of the animation is completed.
Queue-Boolean value. Indicates whether to place an animation in the effect queue. If false, the animation starts immediately.
SpecialEasing- ing of one or more CSS attributes from the styles parameter and their corresponding easing Functions

The. queue () function in animation

. Queue ()

Next, let's talk about the queue function.

Let's start with a simple example:

If you want to make a small div with a black background, first collapse (slideUp), put it down (SlideDown), and then turn the background into white, how should the statement be written?

Having learned the lessons of the previous example, I believe that such statements are not written in a naive order?

The Code is as follows:	Copy code
Certificate ('div'0000.slideup('slow'0000.slidedown('slow'0000.css ({"background": "red "});

What should I do? Use the queue function! Brilliant!

The Code is as follows:	Copy code
$ ('Div '). slideUp ('low'). slideDown ('low'). queue (function (next ){ Certificate ('{object'}.css ({"background": "red "}); Next (); });

The actual example is not displayed on the page. This is a very simple code. You can imagine it.

Here I want to explain a few questions:

First of all, when jQuery officially elaborated on the. queue method, there was such an interesting sentence:

This feature is similar to providing a callback function with an animation method,
But does not require the callback to be given at the time the animation is already med.

We have to go back to the Function Definition of. queue (). In fact, we now add function usage in queue. The official function prototype is:
Queue ([queueName], callback (next ))

That is to say, the added function is actually a callback function about the queue. That is, after the queue ends, the system automatically calls the function you added.

In one sentence, what is a callback function? Baidu, you will know. The first article in the returned results is Baidu's explanation of the "callback function. But as I mentioned at the beginning of this article, it does give you a very detailed explanation, but the premise is that you can digest the C ++ professional vocabulary and code ...... Fortunately, my Unix Network Programming teacher (Hey, a doctor from Peking University) once gave us a very popular explanation, defined by myself, and called the system. The key to a callback function is that we cannot predict when it will be called. Because we just defined such a function, we may notify the system to call it after completing a series of actions.

In fact, we can consider this. If we use this function as the slideDown callback function, isn't it all the same? This is because all we want is to ensure that the color changing function is executed after slideDown. Both the slideDown and queue callback functions can ensure this effect! Look:

The Code is as follows:	Copy code
$ ('Div '). slideUp ('low'). slideDown ('low', function (){ Certificate ('{object'}.css ({"background": "red "}); });

It is just the same thing.

One more thing to note is whether or not the next parameter and next () in. queue () can be removed?

We mentioned above that the function in queue is a callback function. If we make some modifications to the above Code, for example:

The Code is as follows:	Copy code
$ ('Div '). slideUp ('low'). slideDown ('low'). queue (function (next ){ Certificate ('{object'}.css ({"background": "red "}); // Next (); }). Hide ('slow ');

First, I commented out the next () statement, and the second was to hide the square after the color changes. However, after you run it, you cannot hide the blocks after the color changes.

Remember that the function in the queue is a callback function. By default, the color changing function is called only after the animation queue is executed. Where does the hide () function come from when all the animation queues are executed ()? So next () is to ensure that the next animation function is executed again after the queue is executed.

I have tried to discard the next parameter and keep the next () statement. This result can be run in modern browsers (such as firefox and chrome), but cannot be run in ie6. So keep it. Next and next () appear only in jquery1.4, And the. dequeue () function is used before. If you want to change the example in this section to dequeue (), as follows:

The Code is as follows:	Copy code
$ ('# Object'). slideUp ('low'). slideDown ('low'). queue (function (){ Certificate ('{object'}.css ({"background": "red "}); $ (This). dequeue (); });

Custom queue

I have mentioned before that I can not use its default 'fx 'queue. This section teaches you how to customize a queue of your own, which is very simple:

I want to create a queue named 'custom', which contains a method to change the background color of a black box, as shown below:

The Code is as follows:	Copy code
$ ("Div"). queue ("custom", function (next ){ Certificate ('div'background .css ({'background ': 'red '}); Next (); });

What you see is what you get -- the previous 'custom' represents the name of the new Queue (what if I also use 'fx? I don't know either. If you are interested, you can leave a message to tell me the result. I will also know if you are interested.) The callback function is still used to pile up the functions you want to execute.

But it's just this code. When you really add it to the webpage and try to run it, you will find that it is not "What you see is what you get", and it will not have any effect at all. Because I intentionally omitted the most critical statement ...... The modified information is as follows:

The Code is as follows:	Copy code
$ ("Div"). queue ("custom", function (next ){ Certificate ('div'background .css ({'background ': 'red '}); Next (); }) . Dequeue ("custom"); // this is the key

Yes, that is,. dequeue ("custom "). Generally, dequeue () is defined as "deleting the top function in the queue and executing it ". I don't agree with the word "delete", but tend to "retrieve". In fact, this function is like a pointer to a queue in a data structure. After the previous function in the queue is executed, take the function at the top of the next queue.