基本效果

image.png
知识点：
Hide（[time]，[fn]）：隐藏效果
Time：动画执行时间；
Fn：动画完成后的回调函数

滑动效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="button" id="goout" value="点击">
  12.     <input type="button" id="comeon" value="回去">
  13.     <input type="button" id="cn" value="了">
  14.     <img src="91.png" id="re" alt="">
  15.     <script>
  16.         $('#goot').click(function(){
  17.             //隐藏效果
  18.             $('#re').slideUp(3000,function(){
  19.                 alert('111');
  20.             });
  21.         });
  22.         $('#comeon').click(function(){
  23.             //显示效果
  24.             $('#re').slideDown(3000,function(){
  25.                 alert('111');
  26.             });
  27.         });
  28.         $('#cn').click(function(){
  29.             //自我判断, 如果隐藏自我显示,如果显示自己隐藏
  30.             $('#re').slideToggle(3000);
  31.         });
  32.     </script>
  33. </body>
  34. </html>

slideDowm：放下，显示效果
slideUp收起，隐藏效果
slideToggle：切换隐藏显示效果.

淡入淡出

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="button" id="goout" value="出来">
  12.     <input type="button" id="comeon" value="来了">
  13.     <br>
  14.     <img src="aasasd.png" id="re" alt="">
  15.     <script>
  16.         $('#goout').click(function(){
  17.             $('re').fadeOut(3000,function(){
  18.                 alert('asdasd');
  19.             });
  20.         });
  21.         $('#comeon').click(function(){
  22.             $('re').fadeIn(3000,function(){
  23.                 alert('sadsad');
  24.             });
  25.         });
  26.     </script>
  27. </body>
  28. </html>

fadeQut淡出效果
fadeIn；淡入效果

自定义效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <input type="button" id="diy" value="执行"><br>
  12.     <img src="asdasd.png" id="re" alt="">
  13.     <script>
  14.         $('#diy').click(function(){
  15.             $('#re').animate(
  16.                 {left:"900",top:"-500"},
  17.                 5000,
  18.                 function(){
  19.                     alert('hh');
  20.                 }    
  21.             );
  22.         });
  23.     </script>
  24. </body>
  25. </html>

Animate（obj，time，fn）：
自定义动画效果：
Obj：接收css参数，最终效果
Time：执行时间；
fn：完成后的回调函数