Introduction to jquery data (), jquery Stop (), jquery delay () function (detailed) _jquery

First, we'll introduce the jquery data () function

The data () function in jquery is used to append data to a selected element, or to obtain data from a selected element. Data that is accessed through the data () function is temporary, and once the page is refreshed, the data stored before it disappears.

The role of jquery data ()

The data () method attaches to the selected element or gets the data from the selected element.
Data that is accessed through the data () function is temporary, and once the page is refreshed, the data stored before it disappears.
This function belongs to the jquery object (instance). If you need to remove data stored through the data () function, use the Removedata () function.

Second, the use of jquery data

1, get the value of the additional data

$ (selector). Data (name)

Parameter description

Name

Optional. Specify the name of the data to be retrieved.

If no name is specified, the method returns all stored data from the element as an object.

2. Append data to object with name and value

$ (selector). Data (Name,value)

Parameter description

Selector: An object for which data needs to be appended or fetched.
Name: The parameter is the names of the data.
Value: The parameter is the values of the data.

3. Attaching data to elements using objects

Adds data to the selected element using an object with a name/value pair.
In addition to assigning value by providing name and value, we can also pass directly to another object ("another") as an argument. In this case, the property name and property values of "another" are treated as multiple key-value pairs, and the "name" and "value" extracted from them are copied to the target object's cache.

$ (selector). Data (object)

Parameter description

Object: Required. Specify the object that contains the name/value pair.

Instance

And then we'll introduce the jquery stop () function

The Stop () function in jquery is used to stop the animation that is running on the current matching element. By default, the Stop () function stops only the animation that is currently running. If you use the animate () function to set A, B, C for the current element of the 3 animation, if the currently executing animation is a, will only stop animation a execution, will not prevent the animation B and C execution. Of course, you can also stop all animations by specifying optional option parameters.
The Stop () function in jquery is used to stop the animation that is running on the current matching element.
Stopping an animation does not restore the state of the animation before it is performed, but it stops directly, and the current animation executes to what state it stays in.
For example, a transition animation that performs an element height from 100px to 200px, stops the animation when the height is 150px, and the current height remains the status of 150px. If the animation sets a callback function after execution, the callback function is not executed.

First, jquery stop () syntax

$ (selector). Stop (Stopall,gotoend)

Parameter description

1, StopAll

Optional. Represents whether you want to empty an unfinished animation queue.
This means that if the value of this argument is true, all subsequent animations or events will be stopped. False to stop only the animation currently being performed by the selected element, and subsequent animations are unaffected. Therefore, this parameter is generally false.
If you use the Stop () method, the animation that is currently running is stopped immediately, and the next animation starts with the current state if the next animation waits for execution.

2, Gotoend

Optional. Represents whether an animated animation is immediately jumped to the end of the current animation.
Specify whether to allow the current animation to complete, which can only be used when the StopAll parameter is set

3, Notes

By default, arguments are not written, and both arguments are considered false.

Two, jquery stop () instance

HTML code example

<! doctype>  

Example description

1, click the button (Stop ()), because two parameters are false. So when the click occurs, Animater does not jump to the final effect of the current animation (animation 1), and goes directly to the animation 2, and then the animation 3,4,5. Until the entire animation is complete.

2, click the button (TRUE), because the first is true, the second is false, so animater immediately all stopped, the animation does not move.

3, click the button (false,true), because the first is false, the second is true, so when the click occurs, animater the current animation (animation 1) stop and Animater directly to the current animation (animation 1) End effect position, Then perform the following animation (animated 2,3,4,5) normally until the entire animation is complete.

3, click the button (true,true), since two are true, so when clicked occurs, Animater jumps to the end of the current animation (animation 1) effect position, then, all animation stop.

Three, jquery stop () in the work of the application

A Drop-down menu, when the mouse is moved up the menu display, when the mouse left the menu hidden, if I move the mouse over and over the menu quickly (that is, the mouse moves out of the menu when the pull drawing is not complete), it will produce "animation accumulation", and when the mouse stops moving, the accumulated animation will continue to execute, Until the animation sequence has finished executing.

Solving method

Add a Stop (true,true) before the code that writes the animation effect, so every time you move the menu quickly, it's OK, and when you move to a menu, stop all the animations that join the queue and complete the current animation (jump to the end of the current animation).

Finally we introduce jquery delay ()

The function of the delay () method in jquery is to set a delay value to postpone the execution of the animation effect, and its invocation format is: $ (selector). Delay (duration) where the parameter duration is a delay value, its unit is milliseconds, and when the delay value is exceeded, Animation continues to hold, delay and settimeout function is still different, delay is more suitable for some use.

You can defer the specified time after the next animation waiting to be performed in the queue. It is commonly used between two jquery effect functions in a queue to delay the execution of the next animation effect after the last animation effect has been performed.

First, the grammar

$ (selector). Delay (Speed,queuename)

1. Parameter description

2, Notes

The delay time (duration parameter) is in milliseconds, the larger the number, the slower the animation, not the faster.
The string ' fast ' and ' slow ' represent 200 and 600 millisecond delay respectively.

Ii. examples of delay ()

Html

<p> animation effect: <select id= "Animation" > <option value= "1" > Animation 1</option> <option value= "2" ; animation 2</option> <option value= "3" > Animation 3</option> <option value= "4" > Animation 4</option> </s elect> <input id= "exec" type= "button" value= "Performing animation" > </p> <div id= "mydiv" style= "width:300px"; height:100px; Background-color: #eee; "
  >CodePlayer</div> <script> $ ("#exec"). Click (function () {var v = $ ("#animation"). Val ();
  var $myDiv = $ ("#myDiv");
  if (v = = "1") {$myDiv. Slideup (1000). Delay ("slow"). FadeIn (1500);  }else if (v = = "2") {$myDiv. fadeout ("slow"). Delay. Slidedown (1000). Animate ({height: "+=300"
  } );
    }else if (v = = "3") {/* Note: Only animations will be added to the effect queue the following code in fact only Slideup (), Slidedown () is added to the effect queue delay () delay only works on Slidedown () Show () executes immediately when called (at which point the Slideup animation effect has not yet been performed): 1, Slideup () is queued, start execution, 2, show () also begins execution, it immediately executes, at this time slideup () The animation has not yet been executedEnd 3, delay 2 seconds 4, execute Slidedown ()/$myDiv. Slideup ("slow"). Delay. Show ()//It is not an effect animation. s
  Lidedown (); }else if (v = = "4") {$myDiv. Show (). Delay (2000)////increase 300px on the basis of existing height (if 100px, then 400px). Animate ({h Eight: "+=300px"}, animate ({width: "50%"}, 1000). Animate ({width: "200px", Height: "100px"}, 1   
  000);
}
} ); </script>

Instance two, let the button in the page Hide 500 milliseconds after the page is loaded, and then show it in 1500 milliseconds

$ (function () { 
var $inputs = $ (' Input[type=button] ') 
. Delay 
. Queue (function () {$ (this). Hide (). Dequeue ();}) 
. Delay (1500) 
. Queue (function () {$ (this). Show ();}); 

Iii. use of delay () Considerations in jquery

1, Delay applies in the jquery animation effect and the similar queue
2. If the next item is an animation effect, a deferred call is performed
3, if it is not an effect animation, it will not be added to the effect queue, so the function will not delay calling it.
4. If you want to add a delay to the animation effect, you need to add it to the queue.

For example

$ (function () { 
var $inputs = $ (' Input[type=button] ') 
. Delay 
. Queue (function () {$ (this). Hide ();}). 
Delay (1500) 
. Show (1); 
. Queue (function () {$ (this). Show ();}); 

Note: The above method is only hidden, will not be shown, after the queue execution, also aborted the continuation of the animation queue, need to invoke dequeue to make it execute

And AS

$ (function () { 
var $inputs = $ (' Input[type=button] ') 
. Delay 
. Queue (function () {$ (this). Hide (). Dequeue ();}) 
. Delay (1500) 
. Show (); 
. Show (1); 

Note: The above method is also only hidden, and will not be shown again! Here show no longer specifies the length of the display animation, the shows method is no longer an animation. As a result, dequeue can only allow subsequent methods in the animation queue to continue without the jquery method in the non-animated queue!