The Jquery data of Jquery stop of and jquery delay of functions of are described in detail one by one
- 2020-09-28 08:42:43
- OfStack
First, let me introduce you to the jquery data() function
The data() function in jQuery is used to attach data to or retrieve data from the selected element. Data accessed through data() function is temporary data, 1 page refresh, previously stored data will no longer exist.
1. Role of jquery data(
The data() method appends data to, or retrieves data from, the selected element.
Data accessed through data() function is temporary data, 1 page refresh, previously stored data will no longer exist.
This function belongs to the jQuery object (instance). If you need to remove data stored through the data() function, use the removeData() function.
2. Usage of jquery data
1. Get the additional value of data
$(selector).data(name)
Parameters that
name:
Optional. Specifies 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. Use name and value to attach data to the object
$(selector).data(name,value)
Parameters that
selector: An object that needs to attach or retrieve data.
name: The parameter is the name of the data.
value: Parameter is the value of the data.
3. Use objects to attach data to elements
Adds data to the selected element using an object with a name/value pair.
In addition to assigning in the manner of providing name and value, we can pass in another object (" another ") directly as an argument. In this case, the property name and property value of "another" will be treated as multiple key-value pairs, and the extracted "name" and "value" will be copied to the cache of the target object.
$(selector).data(object)
Parameters that
object: Yes. Specifies the object that contains name/value pairs.
The instance
<html>
<head>
<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"));
});
});
</script>
</head>
<body>
<button id="btn1"> Add data to div The element </button><br />
<button id="btn2"> Get has been added to div Element data </button>
<div></div>
</body>
</html>Then I'll introduce you to the jquery stop() function
The stop() function in jQuery is used to stop the animation running on the currently matched element. By default, the stop() function will only stop the currently running animation. If you use the animate() function to animate A, B, and C for the current element, if the animation being executed is A, it will only stop the execution of the animation A, and will not prevent the execution of the animation B and C. Of course, you can also stop all animations by specifying optional parameters.
The stop() function in jQuery is used to stop the animation running on the currently matched element.
Stop animation is not to return to the situation before the animation execution, but directly stop, the current animation execution to the state, stay in the state.
For example: Perform a transition animation of an element height from 100px to 200px, and stop the animation when the height is 150px, the current height remains the same as 150px. If the animation sets the callback function after execution, the callback function will not be executed.
1. jquery stop() grammar
$(selector).stop(stopAll,goToEnd)
Parameters that
1, stopAll
Optional. Represents whether to clear an unfinished animation queue.
This means that if the value of this parameter is true, all subsequent animations or events will be stopped. If the parameter value is false, then only the animation currently executed by the selected element is stopped, and subsequent animations are not affected. Therefore, the parameter 1 is generally false.
If you use the stop() method, you immediately stop the currently running animation and start the next animation with the current state if there is another animation waiting to be executed.
2, goToEnd
Optional. Represents whether the animation being executed jumps directly to the end of the current animation.
Specifies whether the current animation is allowed to complete. This parameter can only be used when the stopAll parameter is set
3, note
By default, if you do not write arguments, you are treated as false for both arguments.
2. jquery stop()
HTML code example
<!DOCTYPE>
<html>
<head>
<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]);
// Grammatical structure
$("button:eq(1)").click(function(){
$("#panel").stop();// Stop the current animation and continue 1 An animation
});
$("button:eq(2)").click(function(){
$("#panel").stop(true);// Clears all animations of the element
});
$("button:eq(3)").click(function(){
$("#panel").stop(false, true);// Make the current animation go straight to the end state To continue the 1 An animation
});
$("button:eq(4)").click(function(){
$("#panel").stop(true, true);// Clears all animations of the element so that the current animation goes directly to the end state
});
})
</script>
</head>
<body>
<button> start 1 A series of animation </button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
<h5 class="head"> What is the jQuery?</h5>
<div class="content">
jQuery .
</div>
</div>
</body>
</html>
Example is given to illustrate
1. Click the button (stop()), as both parameters are false. So when clicking occurs, animater does not skip to the final effect of the current animation (animation 1), but goes directly to animation 2, and then animation 3,4,5. Until the entire animation is complete.
2. Click the button (stop(true)). Since the first is true and the second is false, all of animater stopped immediately and the animation stopped.
3, click on the button (stop (false true)), because the first is false, second is true, so click occurs, animater in the current animation animation (1) stop and animater jump straight to the current animation animation (1) the final position of the end effect, and then under the normal execution of animation (animation 2 5-tetrafluorobenzoic), completed the entire animation.
3. Click the button (stop(true, true). Since both are true, when clicked, animater will jump to the final end of the current animation (animation 1), and then, all animations will stop.
3. Application of jquery stop() in work
A drop-down menu, menu display, when the mouse went up when the mouse left menu to hide, if I keep the mouse move quickly removed from the menu (that is, when under the menu pull picture unfinished, the mouse and move out of the menu) can produce "accumulation of animation", when the mouse after stop moving, the accumulation of animation will continue execution, until completion of the animation sequences.
The solution
Add stop(true, true) before writing the animation effect code, so that every quick move in and out of the menu, it is normal. When the move into a menu, stop all the animation of the queue, complete the current animation (jump to the final position of the current animation).
And finally jquery delay()
In jquery, the function of delay() method is to set a delay value to postpone the execution of the animation effect, and its call format is: $(selector).delay(duration), in which the parameter duration is the delay value, and its unit is milliseconds. When the delay value is exceeded, the animation will continue to be executed.
You can delay the execution of the next animation in the queue for a specified time. It is commonly used between two jQuery effect functions in a queue to delay the execution of the next one after the last one.
1. Grammar
$(selector).delay(speed,queueName)
1. Parameter description
2, note
Delay time (duration parameter) is measured in milliseconds. The higher the value, the slower the animation, not the faster.
The strings 'fast' and 'slow' represent delays of 200 and 600 milliseconds, respectively.
2. delay () instance
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>
</select>
<input id="exec" type="button" value=" Perform the 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( 2000 )
.slideDown( 1000 )
.animate( { height: "+=300" } );
}else if(v == "3"){
/*
Note: only animations are added to the effect queue
The following code is actually only slideUp() , slideDown() It joins the effect queue
delay() The delay is only true slideDown() Play a role
show() It is executed immediately when invoked ( At this time slideUp The animation effect has not been executed yet )
The following code is executed in the following order:
1 , slideUp() To be queued, to be executed,
2 , show() It also starts executing, and it finishes executing immediately, at this point slideUp() The animation has not been executed yet
3 Delay, 2 seconds
4 , perform SlideDown()
*/
$myDiv.slideUp( "slow" )
.delay( 2000 )
.show( ) // It is not 1 Effect animation
.slideDown( );
}else if(v == "4"){
$myDiv.show()
.delay( 2000 )
// Add to the existing height 300px ( If it turns out to be 100px And that's when you increase it 400px)
.animate( { height: "+=300px" }, 2000 )
.animate( { width: "50%" }, 1000 )
.animate( { width: "200px", height: "100px" }, 1000 );
}
} );
</script>Example 2. Make a button in a page hidden for 500 milliseconds after the page loads and then displayed for another 1500 milliseconds
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.queue(function(){$(this).show();});
});
3. Notes for using delay() in jquery
1. delay is suitable for jQuery animation effects and similar queues
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 make a delayed call to it.
4. To delay the non-animation effect, you need to add it to the queue queue.
For example,
$(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 and will not be shown any more. After the execution of queue, the execution of the animation queue is also suspended. It needs to call dequeue to make it continue
And as
$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.show();
//.show(1);
}); Note: the above method is also only hidden, not shown again! Here show no longer specifies how long the animation should be displayed, so the show method is no longer an animation. Therefore, dequeue can only make the subsequent method in the animated queue execute, but not the non-animated queue jquery method execute!