jQuery 效果 animate() 实例

backgroundPosition

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.     $("body").animate({backgroundPosition:"40% 40%"},0);
  8.   });
  9.   $(".btn2").click(function(){
  10.     $("body").animate({backgroundPosition:"0% 0%"},0);
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body style="background-image:url(/i/eg_background.jpg);background-repeat:no-repeat;background-attachment:fixed;">
  16. <p>This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

borderWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({borderWidth:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({borderWidth:"1px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="border:1px solid black">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

borderBottomWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({borderBottomWidth:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({borderBottomWidth:"1px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="border:1px solid black">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

borderLeftWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({borderLeftWidth:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({borderLeftWidth:"1px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="border:1px solid black">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

borderRightWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({borderRightWidth:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({borderRightWidth:"1px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="border:1px solid black">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

borderTopWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({borderTopWidth:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({borderTopWidth:"1px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="border:1px solid black">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

borderSpacing

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function()
  6.   {
  7.   $(".btn1").click(function(){
  8.     $("table").animate({borderSpacing:"10px"},"slow");
  9.   });
  10.   $(".btn2").click(function(){
  11.     $("table").animate({borderSpacing:"2px"},"slow");
  12.   });
  13. });
  14. </script>
  15. <style>
  16. table{border:1px solid black;}
  17. td{border:1px solid black;}
  18. </style>
  19. </head>
  20. <body>
  21. <table>
  22. <tr>
  23. <td>Peter</td>
  24. <td>Griffin</td>
  25. </tr>
  26. <tr>
  27. <td>Lois</td>
  28. <td>Griffin</td>
  29. </tr>
  30. </table>
  31. <button class="btn1">Animate</button>
  32. <button class="btn2">Reset</button>
  33. </body>
  34. </html>

margin

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({margin:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({margin:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

marginBottom

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({marginBottom:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({marginBottom:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

marginLeft

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({marginLeft:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({marginLeft:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

marginRight

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({marginRight:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({marginRight:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

marginTop

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({marginTop:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({marginTop:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

outlineWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({outlineWidth:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({outlineWidth:"1px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="outline:1px solid black">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

padding

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({padding:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({padding:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

paddingBottom

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({paddingBottom:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({paddingBottom:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

paddingLeft

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({paddingLeft:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({paddingLeft:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

paddingRight

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({paddingRight:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({paddingRight:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

paddingTop

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({paddingTop:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({paddingTop:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

height

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({height:"50%"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({height:"20px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;height:20px;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

width

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({width:"50%"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({width:"100%"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

maxHeight

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({maxHeight:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({maxHeight:"200px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;height:200px;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

maxWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({maxWidth:"50%"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({maxWidth:"100%"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

minHeight

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({minHeight:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({minHeight:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

minWidth

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({minWidth:"200px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({minWidth:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;width:100px;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

font

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({font:"30px arial,sans-serif"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({font:"15px arial,sans-serif"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;font:15px arial,sans-serif;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

fontSize

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({fontSize:"3em"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({fontSize:"1em"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p style="background-color:yellow;">This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

bottom

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({bottom:"-200px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({bottom:"-70px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <button class="btn1">Animate</button>
  17. <button class="btn2">Reset</button>
  18. <div style="position:relative">
  19. <p style="background-color:yellow;width:100px;position:absolute">This is a paragraph.</p>
  20. </div>
  21. </body>
  22. </html>

left

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({left:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({left:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <button class="btn1">Animate</button>
  17. <button class="btn2">Reset</button>
  18. <div style="position:relative">
  19. <p style="background-color:yellow;width:100px;position:absolute">This is a paragraph.</p>
  20. </div>
  21. </body>
  22. </html>

right

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({right:"50%"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({right:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <button class="btn1">Animate</button>
  17. <button class="btn2">Reset</button>
  18. <div style="position:relative">
  19. <p style="background-color:yellow;width:100px;position:absolute;right:0px;">This is a paragraph.</p>
  20. </div>
  21. </body>
  22. </html>

top

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({top:"100px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({top:"0px"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <button class="btn1">Animate</button>
  17. <button class="btn2">Reset</button>
  18. <div style="position:relative">
  19. <p style="background-color:yellow;width:100px;position:absolute">This is a paragraph.</p>
  20. </div>
  21. </body>
  22. </html>

letterSpacing

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({letterSpacing:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({letterSpacing:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p>This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

wordSpacing

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({wordSpacing:"10px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({wordSpacing:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p>This is a paragraph.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

lineHeight

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({lineHeight:"3em"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({lineHeight:"1em"});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p>This is a paragraph. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>

textIndent

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $(".btn1").click(function(){
  7.   $("p").animate({textIndent:"30px"});
  8.   });
  9.   $(".btn2").click(function(){
  10.   $("p").animate({textIndent:""});
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p>This is a paragraph. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text. This is some more text.</p>
  17. <button class="btn1">Animate</button>
  18. <button class="btn2">Reset</button>
  19. </body>
  20. </html>