The jquery animate method implements the mouse to show off the hidden effect

Introduction of Animate method

This method changes the element from one state to another through a CSS style. CSS property values are gradually changed, so you can create animation effects.

Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").

Note: use ' + = ' or ' = ' to create a relative animation (relative animations).

Example 1. Implement the mouse through the display to leave the hidden effect

CSS Code

The code is as follows

Copy Code

@CHARSET "UTF-8"; * HTML. showbox,* HTML. Overlay { Position:absolute; Top:expression (eval (document.documentElement.scrollTop)); } #AjaxLoading { border:1px solid #8CBEDA; 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

/** * Load 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:1200px; ' ></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 displaying loading, call before Ajax execution * @param msg operation message, "Load", "Save", "delete" */ function Startloading (msg) { Ajaxloadinginit (msg); $ (". Overlay"). CSS ({' Display ': ' Block ', ' opacity ': ' 0.8 '}); $ (". Showbox"). Stop (true). Animate ({' margin-top ': ' 300px ', ' opacity ': ' 1 '},200); } /** * Hidden after the completion of the load, called after the completion of Ajax execution (complete) */ function endloading () { $ (". Showbox"). Stop (true). Animate ({' margin-top ': ' 250px ', ' opacity ': ' 0 '},400); $ (". Overlay"). CSS ({' Display ': ' None ', ' opacity ': ' 0 '}); }

Definitions and usage

Syntax 1
$ (selector). Animate (Styles,speed,easing,callback)

Parameters

Styles
Necessary. A CSS style and value that provides animation effects.
Possible CSS style values (provide an instance):
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"), not CSS names (such as "font-size").

Speed
Optional. Specify the speed of the animation. The default is "normal".
Possible values:
Milliseconds (for example, 1500)
"Slow"
"Normal"
"Fast"

Easing
Optional. The easing function that sets the animation speed in a different animation point.
The built-in easing function:
Swing
Linear
More easing functions are available in the extension.

Allback
Optional. The function to execute after the animate function has finished executing.

Syntax 2
$ (selector). Animate (Styles,options)

Styles required. Specify the CSS style and value (IBID.) that produce the animation effect.

Options
Optional. Specify additional options for animations.
Possible values:
Speed-Set the speed of the animation
Easing-Specify the easing function to use
Callback-the function to be executed after the animation completes
Step-the function to be executed after each stage of the animation is completed
Queue-Boolean value. Indicates whether animations are placed in the effect queue. If False, the animation will begin immediately
Specialeasing-mappings of one or more CSS properties from the styles parameter, and their corresponding easing functions

The. Queue () function in animation

. Queue () Preliminary

Let's talk about the queue function.

Let's start with a simple example:

If you want to let a small square div with a black background, first put (Slideup), in the Drop (Slidedown), the background and then white, the statement should be how to write?

Learn from the lesson of the last example, I believe there is no naïve in order to write such a statement, right?

The code is as follows	Copy Code
$ (' div '). Slideup (' slow '). Slidedown (' slow '). CSS ({"Background": "Red"});

How should I write it? Use the queue Function! brilliant!

The code is as follows	Copy Code
$ (' div '). Slideup (' slow '). Slidedown (' slow '). Queue (function (next) { $ (' #object '). CSS ({"Background": "Red"}); Next (); });

The actual example does not show on the page, this is a very simple code, should be able to imagine it.

Here I would like to say a few questions:

First of all, jquery's official statement about the method of. Queue is a very interesting remark:

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

We're going to go back to the function definition of. Queue () In fact, we now use the function in queue, the official function of the prototype is:
Queue ([QueueName], callback (next))

That means the function we're adding is actually a callback function for the queue. That is, after the queue is finished, the system will automatically invoke the function you are adding.

In a word, exactly what is a callback function? Baidu a bit, you will know. The return of the results of the first is Baidu encyclopedia about "callback function" explanation. But as the beginning of this article says, it does give you a very detailed explanation, but only if you can digest the C + + professional vocabulary and code ... Luckily my UNIX network programmer (Hey, a PhD from Peking University) once gave us a very popular explanation for our definition of system calls. The key to the callback function is that we cannot predict when it will be invoked. Because we've just defined a function that might notify the system to call it after it completes a series of actions.

In fact, we can consider this, if this function as a Slidedown callback function is not the same effect? Because all we want to do is to ensure that the color function is executed after Slidedown, and the callback function of Slidedown and queue can guarantee this effect! Look

The code is as follows	Copy Code
$ (' div '). Slideup (' slow '). Slidedown (' Slow ', function () { $ (' #object '). CSS ({"Background": "Red"}); });

It's the same thing.

One more thing to note is that the next parameter in queue () and next () can you give up one or the other?

We mentioned above that the function in the queue is a callback function, if we make some changes to the above code, for example:

The code is as follows	Copy Code
$ (' div '). Slideup (' slow '). Slidedown (' slow '). Queue (function (next) { $ (' #object '). CSS ({"Background": "Red"}); Next (); }). Hide (' slow ');

One is that I have commented out the next () statement, and I hope to hide the box after changing color. However, after you run, you will find that you cannot hide from the other block after changing the color.

To remember that a function in a queue is a callback function, the color function is invoked only if the animation queue is finished, and since the animation queue is executed, where is the hide ()? So next () is to ensure that the next animation function is executed again after this queue is executed

I have tried to discard the next argument and keep the next () statement, which can be run in a modern browser (Firefox,chrome, and so on), but not in IE6. So, keep it. Next and Next () are jquery1.4, and the. Dequeue () function is used before, if you want to change the example of this section to use Dequeue (), as follows:

The code is as follows	Copy Code
$ (' #object '). Slideup (' slow '). Slidedown (' slow '). Queue (function () { $ (' #object '). CSS ({"Background": "Red"}); $ (this). Dequeue (); });

Custom queues

I have mentioned before that you can actually not use its default ' FX ' queue, this section teaches you how to customize a queue of their own, very simple:

I want to create a queue called ' Custom ', which has a way to make the black squares change the background color, as follows:

The code is as follows	Copy Code
$ ("div"). Queue ("Custom", function (next) { $ (' div '). css ({' Background ': ' Red '}); Next (); });

What you see is what you get--the front one ' custom ' represents the queue name for the new queue (what if I also take ' FX ')? I do not know, interested friends after the attempt can leave a message to tell me the results, I am also interested to know, the back is still a callback function, you want to perform the function of piling in.

But for this code, when you actually add to the page and try to run it, you'll find that it's not "WYSIWYG," and there's no effect at all. Because I deliberately omitted the most critical statement ... The following modifications are:

The code is as follows	Copy Code
$ ("div"). Queue ("Custom", function (next) { $ (' div '). css ({' Background ': ' Red '}); Next (); }) . Dequeue ("Custom"); This is the key

Yes, that's the sentence, dequeue ("Custom"). The general pair with dequeue () is defined as "delete the topmost function in the queue and execute it." I do not agree with the word "delete", but tend to "take out", in fact, this function is like a data structure in the queue pointer, to the queue after the previous function, after the end of a queue to remove the topmost function.