First introduce the jquery data () function

The data () function in jquery is used to append data to the selected element.Or get data from selected elements.The data accessed through the data () function are temporary data.Once the page refreshes,The previously stored data will no longer exist.

First, the role of jquery data ()

The data () method appends data to the selected element,Or get data from selected elements.

The data accessed through the data () function are temporary data.Once the page refreshes,The previously stored data will no longer exist.

This function belongs to a jquery object (instance). If you need to remove the data stored by the data () function,Use the removedata () function.

Second, the use of jquery data

1.Get the value of additional data

$(selector) .data (name)

Parameter Description


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

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

2.Use name and value to append data to the object

$(selector) .data (name, value)

Parameter Description

selector:An object that needs to attach or retrieve data.

name:The parameter is the name of the data.

value:The parameter is the value of the data.

3.Use objects to append data to elements

Adds data to selected elements using objects with name/value pairs.

In addition to assigning values ​​by providing name and value,We can also pass in another object ("another") directly as a parameter.In this situation,"Another" attribute names and attribute values ​​will be treated as multiple key-value pairs,The "name" and "value" extracted from it are copied to the cache of the target object.

$(selector) .data (object)

Parameter Description

object:required. Specifies an object containing name/value pairs.


<script type="text/javascript">
$(document) .ready (function () {
 testobj=new object ();
 testobj.greetingmorn="good morning!";
 testobj.greetingeve="good evening!";
 $("#btn1"). click (function () {
  $("div"). data (testobj);
 $("#btn2"). click (function () {
  alert ($("div"). data ("greetingeve"));
<button>Add data to div element</button><br />
<button>Get data added to div element</button>

Next, I will introduce the jquery stop () function.

The stop () function in jquery is used to stop the running animation on the currently matched element.by default,The stop () function will only stop the currently running animation.If you use the animate () function to set the a, b, and c animations for the current element, if the currently executing animation is a, then only the execution of the animation a will be stopped, and the execution of the animations b and c will not be blocked. Of course, you can also stop all animations by specifying optional option parameters.

The stop () function in jquery is used to stop the running animation on the currently matched element.

Stopping the animation is not to restore the state before the animation was executed.But stop directly,What state the current animation is executed in,Just stay in what state.

For example:perform a transition animation of the element height from 100px to 200px,The animation stops when the height is 150px,The current height is still 150px. If the animation sets a callback function after execution is complete,The callback function is not executed.

First, jquery stop () syntax

$(selector) .stop (stopall, gotoend)

Parameter Description


Optional. Whether to clear the queue of unfinished animations.

This means that if the value of this parameter is true, all subsequent animations or events will be stopped.If the value of this parameter is false, only the currently executing animation of the selected element will be stopped.Subsequent animations are not affected.Therefore, this parameter is generally false.

If you use the stop () method, it will immediately stop the currently running animation,If there are still animations waiting to be executed,The next animation starts with the current state.


Optional. Represents whether to jump directly to the end of the current animation.

Specifies whether to allow the completion of the current animation,This parameter can only be used when the stopall parameter is set


by default,No parameters are written,Both parameters are considered false.

Second, jquery stop () instance

html code example

<! Doctype>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery stop ()</title>
<script type="text/javascript">
$(function () {
  $("button:eq (0)"). click (function () {
    $("#panel"). animate ({height:"150"}, 1000) .animate ({width:"300"},      1000) .hide (2000) .animate ({height:"show", width:"show", opacity:"show"}, 1000) .animate ({height:"500"},      1000);
  //stop ([clearqueue] [, gotoend]);
  //grammar structure
  $("button:eq (1)"). click (function () {
    $("#panel"). stop ();//Stop the current animation,Continue to the next animation
  $("button:eq (2)"). click (function () {
    $("#panel"). stop (true);//Clear all animations of the element
  $("button:eq (3)"). click (function () {
    $("#panel"). stop (false, true);//Let the current animation directly reach the end state and continue to the next animation
  $("button:eq (4)"). click (function () {
    $("#panel"). stop (true, true);//Clear all animations of the element,Let the current animation directly reach the end state
<button>Start a series of animations</button>
<button>stop ()</button>
<button>stop (true)</button>
<button>stop (false, true)</button>
<button>stop (true, true)</button>
  <h5>What is jquery?</h5>


1. Click the button (stop ()), because both parameters are false. So when the click happens,animater does not jump to the final effect of the current animation (animation 1),And go directly to animation 2, and then animations 3, 4, 5. until the entire animation is completed.

2. Click the button (stop (true)). Because the first one is true and the second one is false, the animater all stops immediately.The animation doesn't move.

3. Click the button (stop (false, true)). Since the first is false and the second is true, when the click occurs,Animater's current animation (animation 1) stops and animater jumps directly to the final end effect position of the current animation (animation 1),Then execute the following animations (animations 2, 3, 4, 5) normally until the entire animation is completed.

3. Click the button (stop (true, true)). Since both are true, when the click occurs,animater jumps to the final end effect position of the current animation (animation 1),Then, all animation stops.

Application of jquery stop () in work

A drop-down menu,When the mouse is moved up, the menu is displayed,The menu is hidden when the mouse is away. If I move the mouse in and out of the menu quickly and continuously (that is, when the menu drop-down animation is not completed,(The mouse moves out of the menu again) will produce "animation accumulation", when the mouse stops moving,The accumulated animation will continue to execute,Until the animation sequence is completed.


Add stop (true, true) before writing the animation effect code, so that each time you quickly move in and out of the menu,Just fine,When moving into a menu,Stop all queued animations,Complete the current animation (skip to the final effect position of the current animation).

Finally, I will introduce jquery delay ()

The function of the delay () method in jquery is to set a delay value to delay the execution of the animation effect,Its calling format is:$(selector) .delay (duration) where the parameter duration is a delay value,Its unit is milliseconds,When the delay value is exceeded,The animation continues to execute. There is still a difference between delay and settimeout functions.Delay is more suitable for some use cases.

You can delay the next animation waiting in the queue for a specified amount of time before executing.It is commonly used between two jquery effect functions in a queue,Thus, the execution time of the next animation effect is delayed after the execution of the previous animation effect.

I. Grammar

$(selector) .delay (speed, queuename)

1.Parameter description


The delay time (duration parameter) is in milliseconds.The larger the value,The slower the animation,Not faster.

The strings "fast" and "slow" represent 200 and 600 millisecond delays, respectively.

Second, the delay () instance


<p>Animation effect:
    <option value="1">Animation 1</option>
    <option value="2">Animation 2</option>
    <option value="3">Animation 3</option>
    <option value="4">Animation 4</option>
  <input type="button" value="execute animation">
$("#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 (2000)
    .slidedown (1000)
    .animate ({height:"+=300"});
  } else if (v == "3") {
    Note:Only animations will be added to the effect queue
    The following code actually only slideup (), slidedown () will join the effect queue
    delay () delay only works for slidedown ()
    show () is executed immediately when it is called (at this time, the animation effect of slideup has not yet finished)
    When the following code is executed in sequence:
    1.Slideup () is added to the queue and execution starts.
    2, show () also starts to execute,It executed immediately,At this time, the animation of slideup () has not finished.
    3. Delay 2 seconds
    4.Execute slidedown ()
    * /
    $mydiv.slideup ("slow")
    .delay (2000)
    .show () //it is not an effect animation
    .slidedown ();
  } else if (v == "4") {
    $mydiv.show ()
    .delay (2000)
    //Add 300px to the existing height (if it was originally 100px, it will be 400px after the increase)
    .animate ({height:"+=300px"}, 2000)
    .animate ({width:"50%"}, 1000)
    .animate ({width:"200px", height:"100px"}, 1000);

Example two, let the button in the page be hidden 500 milliseconds after the page loads,And then show it again in 1500 milliseconds

$(function () {
var $inputs=$("input [type=button]")
.delay (500)
.queue (function () {$(this) .hide (). dequeue ();})
.delay (1500)
.queue (function () {$(this) .show ();});

Third, the use of delay () note in jquery

1.Delay applies to jquery animation effects and similar queues

2. If the next item is an animation effect,Will perform a delayed call

3. If it's not effect animation,It will not be added to the effects queue,So the function does not make a delayed call to it.

4. If i want to add a delay other than an animation effect,You need to add it to the queue.


$(function () {
var $inputs=$("input [type=button]")
.delay (500)
.queue (function () {$(this) .hide ();})
.delay (1500)
.show (1);
//. queue (function () {$(this) .show ();});

Note:The above method is only hidden,Won't show again,After the queue is executed,Also suspended the execution of the animation queue,Need to call dequeue to make it go on


$(function () {
var $inputs=$("input [type=button]")
.delay (500)
.queue (function () {$(this) .hide (). dequeue ();})
.delay (1500)
.show ();

Note:The above method is also only hidden,No more showing! Here show no longer specifies the duration of the animation.The show method is no longer an animation.From this we know thatdequeue can only make subsequent methods in the animation queue execute,Can't make jquery methods in non-animated queues continue to execute!

  • Previous Solve the problem of 404 when js image is loaded
  • Next Analysis of Usage of References in Android Programming