1-隐藏/显示/切换

隐藏

  1. <body>
  2.     <div>hello world</div>
  3.     <button id="btn">按钮</button>
  4.     <script>
  5.         $("#btn").click(function(){
  6.             $("div").hide(3000)
  7.         })
  8.     </script>
  9. </body>

切换

  1. <body>
  2.     <div>hello world</div>
  3.     <button id="btn">按钮</button>
  4.     <script>
  5.         $("#btn").click(function(){
  6.             //判断元素是否显示
  7.             //is(":visible") 判断元素是否隐藏
  8.             var isShow =$("div").is(":visible");
  9.             console.log(isShow);
  10.             if(isShow){
  11.                 $("div").hide(1000)
  12.             }else{
  13.                 $("div").show(1000)
  14.             }
  15.         })
  16.     </script>
  17. </body>

toggle 融合hide和show方法

  1. <body>
  2.     <div>hello world</div>
  3.     <button id="btn">按钮</button>
  4.     <script>
  5.         $("#btn").click(function(){
  6.             //toggle 融合hide和show方法
  7.             $("div").toggle(1000)
  8.         })
  9.     </script>
  10. </body>

使用原生的script达到切换

  1. <body>
  2.     <div id="div" style="display: block;">hello world</div>
  3.     <button id="btn">按钮</button>
  4.     <script>
  5.         var div=document.getElementById("div");
  6.         var btn=document.getElementById("btn");
  7.         btn.onclick=function(){
  8.             if(div.style.display=="block"){
  9.                 div.style.display="none"
  10.             }else{
  11.                 div.style.display="block"
  12.             }
  13.         }
  14.     </script>
  15. </body>

2-淡出/淡入

淡入fadeIn()

jQuery fadeIn() 用于淡入已隐藏的元素。

  1. $(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：

  1. style>
  2.     p{
  3.         display: none;
  4.     }
  5. </style>
  6. <body>
  7.     <p id="p1">123</p>
  8.     <p id="p2">123</p>
  9.     <p id="p3">123</p>
  10.     <button>btn</button>
  11.     <script>
  12.         $(document).ready(function () {
  13.             $("button").click(function () {
  14.                 $("#p1").fadeIn();
  15.                 $("#p2").fadeIn("slow");
  16.                 $("#p3").fadeIn(3000);
  17.             });
  18.         });
  19.     </script>
  20. </body>

淡出 fadeOut()

jQuery fadeOut() 方法用于淡出可见元素。

  1. $(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：

  1. <body>
  2.     <p id="p1">123</p>
  3.     <p id="p2">123</p>
  4.     <p id="p3">123</p>
  5.     <button>btn</button>
  6.     <script>
  7.         $(document).ready(function () {
  8.             $("button").click(function () {
  9.                 $("#p1").fadeOut();
  10.                 $("#p2").fadeOut("slow");
  11.                 $("#p3").fadeOut(3000);
  12.             });
  13.         });
  15.     </script>
  16. </body>

切换 fadeIn+fadeOut

  1.     <style>
  2.         div{
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: #333;
  6.             display: none;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <button>按钮</button>
  12.     <div></div>
  13.     <script>
  14.         $("button").mouseover(function(){
  15.             $("div").fadeIn(1000)
  16.         }).mouseout(function(){
  17.             $("div").fadeOut(1000)
  18.         })
  19.     </script>
  20. </body>

切换 fadeToggle()

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  1. $(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：

  1. <body>
  2.     <p id="p1">123</p>
  3.     <p id="p2">123</p>
  4.     <p id="p3">123</p>
  5.     <button>btn</button>
  6.     <script>
  7.         $(document).ready(function () {
  8.             $("button").click(function () {
  9.                 $("#p1").fadeToggle();
  10.                 $("#p2").fadeToggle("slow");
  11.                 $("#p3").fadeToggle(3000);
  12.             });
  13.         });
  15.     </script>
  16. </body>

渐变淡出 fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

  1. $(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：

  1. <body>
  2.     <p id="p1">123</p>
  3.     <p id="p2">123</p>
  4.     <p id="p3">123</p>
  5.     <button>btn</button>
  6.     <script>
  7.         $(document).ready(function () {
  8.             $("button").click(function () {
  9.                 $("#p1").fadeTo("slow",0.1);
  10.                 $("#p2").fadeTo("slow",0.4);
  11.                 $("#p3").fadeTo("slow",0.5);
  12.             });
  13.         });
  15.     </script>
  16. </body>

3-滑动

$(selector).slideDown(speed,callback);向下滑动元素 $(selector).slideUp(speed,callback);向上滑动元素

$(selector).slideToggle(speed,callback);在 slideDown() 与 slideUp() 方法之间进行切换。

3-1 向上slideUp() 向下slideDown()

  1.   <style>
  2.         div {
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: #333;
  7.         }
  8.     </style>
  9. </head>
  11. <body>
  12.     <button>按钮</button>
  13.     <div></div>
  14.     <script>
  15.         $("button").click(function () {
  16.              if ($("div").is(":visible")) {
  17.                 $("div").slideUp()
  18.              } else {
  19.                $("div").slideDown()
  20.            }
  21.         })
  22.     </script>
  23. </body>

3-2 切换—slideToggle

  1.     <style>
  2.         div {
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: #333;
  7.         }
  8.     </style>
  9. </head>
  11. <body>
  12.     <button>按钮</button>
  13.     <div></div>
  14.     <script>
  15.         $("button").click(function () {
  16.              $("div").slideToggle()
  17.         })
  18.     </script>
  19. </body>

4-动画 animate

  1. $(selector).animate({params},speed,callback);
  1. <style>
  2.         div{
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: #333;
  6.         }
  7.     </style>
  8. </head>
  9. <body>
  10.     <button>按钮</button>
  11.     <div></div>
  12.     <script>
  13.        $("button").click(function(){
  14.            $("div").animate({width:"200px"},1000)
  15.        })
  16.     </script>
  17. </body>
  1. // 操作多个属性
  2. $("button").click(function(){
  3.   $("div").animate({
  4.     left:'250px',
  5.     opacity:'0.5',
  6.     height:'150px',
  7.     width:'150px'
  8.   });
  9. }); 
  10. //使用相对值
  11. $("button").click(function(){
  12.   $("div").animate({
  13.     left:'250px',
  14.     height:'+=150px',
  15.     width:'+=150px'
  16.   });
  17. });
  18. //使用预定义的值
  19. $("button").click(function(){
  20.   $("div").animate({
  21.     height:'toggle'
  22.   });
  23. });
  24. //使用队列功能
  25. $("button").click(function(){
  26.   var div=$("div");
  27.   div.animate({height:'300px',opacity:'0.4'},"slow");
  28.   div.animate({width:'300px',opacity:'0.8'},"slow");
  29.   div.animate({height:'100px',opacity:'0.4'},"slow");
  30.   div.animate({width:'100px',opacity:'0.8'},"slow");
  31. });

5-停止动画

$(selector).stop(stopAll(可选。规定是否停止被选元素的所有加入队列的动画。),goToEnd(可选。规定是否允许 完成当前的动画。)); 适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

  1. stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画。
  2. stop(true,true):停止被选元素的所有加入队列的动画，但允许完成当前动画。
  3. stop()等价于stop(false,false):停止被选元素当前的动画，但允许完成以后队列的所有动画。
  4. stop(false,true):立即结束当前的动画到最终效果，然后完成以后队列的所有动画。

6-函数队列

$(selector).queue(queueName队列名称)创建一个队列功能区执行被选中的元素,空括号表示要执行的函数队列

dequeue() 运行被选元素的下一个排队函数,方法在通过 queue() 添加一个函数之后被调用，以便允许要继续的进程

$(selector).clearQueue(queueName可选。规定要停止的队列的名称。) stop() 只适用于动画，clearQueue() 能够清除任何排队的函数（通过 .queue() 方法添加到通用 jQuery 队列的任何函数）。

7-延迟

$(selector).delay(speed,queueName队列名称)

  1. $("button").click(function(){
  2.         $("#div1").delay("slow").fadeIn();
  3.         $("#div2").delay("fast").fadeIn();
  4.         $("#div3").delay(800).fadeIn();
  5.         $("#div4").delay(2000).fadeIn();
  6.         $("#div5").delay(4000).fadeIn();
  8.     });