I. animation display of jQuery
1. $(document).ready(function(){
2. $("#button1").click(function(){
3. $ ( "p").hide(500,function(){
4. alert("Hidden completion")
5. })
6. })
7. $("#button2").click(function(){
8. $( "p").show(200,function(){
9. alert("Show success")
10. })
11. })
Notes:
1. Join the jquery Library
2. Document ready
$(document).ready(function(){
})
Amount to:
(function()) basic syntax: (function() {}) basic syntax: (function()) basic syntax:
===jquery;
$(selector).action()===jquery(selector).action{}
Recommended use $symbol
The sliding effect of jQuery animation
#slide and panel
1. #slide,#panel{
2. padding: 5px;
3. text-align: center;
4. background-color: #33b5e5;
5. border: solid 1px red;
6. }
7. #panel{
8. display: none;
9. padding: 40px;
10. }
The animation effect of jQuery
animate() is used to create a custom animation
Syntax: $(select).animate({params},speed,callback) must have params parameters to define CSS properties to form animation, and the optional parameters are the same as several of them.
1. Move the effect 200 to the right through animate()
1. $(document).ready(function(){
2. $("button").click(function(){
3. $("div").animate({left:"20px"},1000,function(){
4. $("div").css({background:"yellow"})
5. })
6. })
7. })
Notes:
1.slide() method: the slideUp() method stretches the specified element; the slideDown() method compresses the specified element
2. Effect practice: click me, slide to show or hide the panel
3. By default, all HTML elements have a static position and are immovable. If you need to change it, you need to set the position attribute of the element to absolute, relative, fixed
IV. start animation and pause animation through animate
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. <script src="jquery-1.9.1.min.js"></script>
7. <script>
8. $(document).ready(function(){
9. $("#button").click(function (){
10. var div = $("div")
11. div.animate({height:"160px",opacity:0.5},5000)
12. })
13. $("#button1").click(function (){
14. $("div").stop()
15. })
16. //stop() is used to pause the animation before it is finished
17. })
18. </script>
19. </head>
20. <body>
21. <input type="button" value="Start animation" id="button" >
22. <input type="button" value="Pause animation" id="button1" >
23. <div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
24. </body>
25. </html>
Note: with jQuery, methods can be linked together. Chaining allows us to run multiple jQuery methods (on the same element) in a statement
grammar
$("#p1").css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgroundColor:"bule"},1000)
Meaning: the ා p1 element will first turn red, then move up at a speed of 1.5 seconds, then down at a speed of 1.5 seconds, and finally change the background color to blue