2. Animation
1 show() method and hide() method
$("selector").show()
Restore the element's default or set display attribute from display:none
$("selector").hide()
Set the element's display The style is none, which is equal to $("selector").css("display","none")
(Note: After passing in parameters, the .show() and .hide() methods will Animation changes the width, height and transparency attributes of the element; the passed parameters control the display speed, in milliseconds, such as .show(600), you can also pass in fast, normal, slow, fast is 200 milliseconds, normal is 400 milliseconds, slow is 600 milliseconds)
2 fadeIn() method and fadeOut() method
$("selector").fadeIn()
Control the transparency from display:none to fully displayed within the specified time
$("selector").fadeOut()
Control the transparency Reduce to display:none within the specified time;
3 slideUp() method and slideDown() method
$("selector").slideUp()
The height of the control element is shortened from bottom to top within the specified time to display:none;
$("selector").slideDown()
Control the height of the element to extend from display:none to the full height within the specified time
4 Custom animation method animate()
$("selector").animate(params,speed,callback);
params: a mapping containing style attributes and values, such as {property1:"value1",property2:"value2",...}
speed: speed parameter, optional
callback: when the animation is completed Execution parameters (i.e. callback function), optional
Common animation examples
<script> <br>//Example of custom animation<br>$(function(){ <br>$("selector").click(function() { <br>$(this).animate({left:"500px"},3000); //selector moves 500px to the right in 3 seconds <br>}); <br>}) <br></script> ; <br>
</div> <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="79900" class="copybut" id="copybut79900" onclick="doCopy('code79900')"><u>Copy code </u></a></span> The code is as follows: </div>
<div class="codebody" id="code79900"> <br><script> <br>//Examples of accumulation and accumulation animation<br>$(function(){ <br>$("selector").click(function(){ <br>$(this).animate({left:" =500px"},3000); //When click events are triggered continuously, 500px will be accumulated at the current position <br>}); <br>}) <br></script>
<script> <br> //Example of multiple animations<br>$(function(){ <br>$("selector").click(function(){ <br>$(this).animate({left:"500px",top: "300px",height:" =100px"},3000); //Move 30 degrees to the lower right and increase the height at the same time<br>}); <br>}) <br></script>
<script> <br>//Example of executing multiple animations in sequence<br>$(function(){ <br>$("selector").click(function(){ <br>$(this). animate({left:"500px"},3000).animate({top:"300px"},3000); //Animation queue<br>}); <br>}) <br></script>
5 Animation callback function
Because the css() method will not be added to the animation queue, it will be executed immediately. If you want to change the css of the selector at the end of the animation, you need to use the callback function
Example:
<script> <br>$("selector").click(function(){ <br>$(this).animate({property1:"value1"},time).animate( {property2:"value2"},time,function(){ <br>$(this).css("property3","value3"); //css() method uses the callback function to join the animation queue<br>}) ; <br>}) <br></script>
(Note: animation callback function applies to all jQuery animation effect methods)
6 Stop animation and determine whether it is in animation state
$("selector").stop()
End the current animation. If there is a next animation in the queue, the next animation will be executed immediately. The format is $("selector").stop([clearQueue][,gotoEnd ])
Example of switching animation:
<script> <br>$("selector").hover(function(){ <br>$(this).stop().animate(); <br>},function() { <br>$(this).stop().animate(); <br>}) <br></script>
When the clearQueue parameter is set to true, the current element will be cleared The next animation queue that has not yet been executed
example:
<script> <br>$("selector").hover(function(){ <br>$(this).stop(true).animate().animate() //The cursor move event is triggered at this time, Directly skip the subsequent animation queue to avoid executing the second animation in this queue <br>}, function(){ <br>$(this).stop(true).animate().animate() <br>}) <br></script>
When the gotoEnd parameter is set to true, the animation being executed can directly reach the state at the end time
is(":animated")
Judgement Whether the element is in animated state can be used to prevent animation accumulation
Example:
<script> <br>if(!$("selector").is(":animated")){ //Determine whether the element is in an animated state <br>//If there is no animation currently, Then add a new animation <br>} <br></script>
7 Other animation methods
3 animation methods specifically for interaction: toggle(speed,[callback]) ; slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
$("selector").toggle()
Switch the visible state of the element. If the element is hidden, switch it to visible, and vice versa
$("selector").slideToggle( )
Switch the visibility of the element through height changes
$("selector").fadeTo()
Adjust the opacity of the element to the specified value in a gradual manner, such as $("selector") .fadeTo(600,0.2);Adjust the content to 20% transparency at 600 milliseconds
8 Summary of animation methods
toggle() is used to replace hide() and show()
slideToggle() is used to replace slideUp() and slideDown()
animate() can replace all animation methods
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
