📚Series of Articles—Contents🔥
The first issue of jQuery that monkeys can also learn - what is jQuery
The second issue of jQuery that monkeys can also learn - citing jQuery
The third phase of jQuery that monkeys can also learn - using jQuery
The fourth issue of jQuery that monkeys can also learn - jQuery Selector Encyclopedia
The fifth issue of jQuery that monkeys can also learn - jQuery style operation
The sixth issue of jQuery that monkeys can also learn - jQuery event (on)
The sixth issue of jQuery that monkeys can also learn - jQuery event (middle)
to be continued
📌Review the previous issue
In the last issue, I talked about the content of jQuery animation, which is divided into upper and lower parts
- In web development, the proper use of animation can make the page more beautiful, thereby enhancing the user experience. jQuery covers a series of methods for realizing animation. When these methods cannot meet the actual needs, users can also customize animation (animate method).
- The last issue talked about jQuery display and hide effects and jQuery sliding effects
🎯jQuery animation
In web development, the proper use of animation can make the page more beautiful, thereby enhancing the user experience. jQuery covers a series of methods for realizing animation. When these methods cannot meet the actual needs, users can also customize animation (animate method).
🧩 jQuery stop animation
-
In the process of using animation, if more than one animation method is called on the same element, then for this element, except for the animation currently being called, other animations will be placed in the effect queue, thus forming an animation queue .
- All animations in the animation queue are executed in sequence. By default, only the current animation is executed before the subsequent animation is executed. To this end, jQuery provides the stop() method to stop the animation effect. Through this method, the animation behind the animation queue can be executed in advance.
-
grammar:
$(selector).stop(stopAll,goToEnd);
Both parameters of the stop() method are optional. The optional stopAll parameter specifies whether the animation queue should be cleared. Defaults to false, which stops only active animations, allowing any queued animations to execute backwards.
The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.
Therefore, by default, stop() will clear the current animation specified on the selected elements.
-
Due to the different settings of the parameters of the stop() method, there will be different effects. The following uses the div element as an example to demonstrate 4 common usage methods.
$("div").stop(); // Stop the current animation and continue to the next animation $("div").stop(true); // Clear all animations in the div element animation queue $("div").stop(true, true); // Stop the current animation and clear all animations in the animation queue $("div").stop(false, true); // Stop the current animation and continue to the next animation
In the above code, when the stop() method does not pass parameters, it means to immediately stop the currently executing animation and start executing the next animation in the animation queue. If the first parameter is set to true, then the remaining animations in the animation queue will be deleted and will never be executed. If the second parameter is set to true, the current animation will be stopped, but every CSS property participating in the animation will be immediately set to their target value.
When using the hover method to achieve the pull-down and hidden sliding effects in the previous period, if the user frequently operates, an animation queue phenomenon will occur, which will affect the user experience. In order to solve this problem, the code will be rewritten through the stop() method below.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <div id="flip">Move the mouse pointer in to show or hide the panel.</div> <div id="panel">Hello world!</div> </body> <script> $(document).ready(function () { $("#flip").hover(function () { $("#panel").stop().slideToggle(); }); }); </script> </html>
Before adding stop(), the effect is as follows:
After adding stop(), the animation queue is blocked.
🧩jQuery fade in and fade out
- The methods used to control the fade-in and fade-out effects of elements in jQuery are as follows
-
method illustrate fadeIn([speed],[easing],[ fn]) Fade in to show matching elements fadeOut([speed],[easing],[ fn]) fade out hidden matching elements fadeTo([[speed],opacity,[easing],[ fn]]) Fade matched elements to the specified transparency fadeToggle([speed,[easing],[ fn]]) Toggle between fadeIn() and fadeOut() effects - In the above table, the parameter opacity of the fadeTo() method represents the transparency value, ranging from 0 to 1, 0 represents complete transparency, 0.5 represents 50% transparency, and 1 represents complete opacity.
Next, demonstrate the use of fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods through specific code.
-
1️⃣fadeIn()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <p>The following example demonstrates fadeIn() The effect of using different parameters.</p> <button>click to fade in div element.</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </html>
1
-
2️⃣fadeOut()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <p>The following example demonstrates fadeOut() The effect of using different parameters.</p> <button>Click to fade out div element.</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(1000); }); }); </script> </html>
1
-
3️⃣fadeToggle()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <p>The example demonstrates fadeToggle() used a different speed(speed) parameter.</p> <button>click to fade in/fade out</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> <script> $(document).ready(function () { $("button").click(function () { $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(1000); }); }); </script> </html>
1
-
4️⃣fadeTo()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <p>demo fadeTo() use different parameters</p> <button>click me to lighten the color</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> <script> $(document).ready(function () { $("button").click(function () { $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.1); }); }); </script> </html>
1
📚Continuous update🔥