jQuery 动画效果

jQuery 动画效果

jQuery 动画效果有四种效果:

        #box{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: plum;
        }

1.显示 show() ;
隐藏 show() ;
显示或隐藏 toggle();

<button id="showbox">显示</button>
<button id="hidebox">隐藏</button>
<button id="togglebox">显示或隐藏</button>
<div id="box"></div>

$("#hidebox").click(function(){
            $("#box").hide(2000,function(){
                console.log("藏");
            })
        })
        $("#showbox").click(function(){
            $("#box").show(2000,function(){
                console.log("藏");
            })
        })
        $("#togglebox").click(function(){
            $("#box").toggle(2000,function(){
                console.log("藏");
            })
        })

2.滑入滑出
slideDown() 滑出
slideUp() 滑入
slideToggle() 滑入或滑出

<button id="downbox">滑入</button>
<button id="upbox">滑出</button>
<button id="togglebox">滑入或滑出</button>
<div id="box"></div>

$("#upbox").click(function(){
            $("#box").slideUp(1000,function(){
                console.log("滑出");
            })
        })
        $("#downbox").click(function(){
            $("#box").slideDown(1000,function(){
                console.log("滑入");
            })
        })
        $("#togglebox").click(function(){
            $("#box").slideToggle(1000,function(){
                console.log("滑入滑出");
            })
        })

3.淡入淡出
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 淡入或淡出
fadeTo() 淡入或淡出到 透明度（值介于 0 与 1 之间）
语法: $(selector).fadeTo(时间速度, 透明度, 函数名);。

<button id="inbox">淡入</button>
<button id="outbox">淡出</button>
<button id="togglebox">淡入或淡出</button>
<button id="tobox">淡入或淡出到</button>
<div id="box"></div>

$("#inbox").click(function(){
           $("#box").fadeIn(1000,function(){
               console.log("淡入")
           })
       })
       $("#outbox").click(function(){
           $("#box").fadeOut(1000,function(){
               console.log("淡出")
           })
       })
       $("#togglebox").click(function(){
           $("#box").fadeToggle(1000,function(){
               console.log("淡入")
           })
       })
       $("#tobox").click(function(){
           $("#box").fadeTo(1000,0.5,function(){
               console.log("淡入")
           })
       })

4.自定义动画
animate() 创建自定义动画
delay() 延迟
stop() 停止
finish() 结束
语法：$(selector).animate({params}, speed, 函数名);

<button id="bigbox">变大</button>
<button id="stopbox">停止</button>
<button id="finishbox">结束</button>
<div id="box"></div>

$("#bigbox").click(function(){
          $("#box").animate({"width":"300px","height":"300px"},5000,function(){
              console.log("变大")
          })
      })
      $("#stopbox").click(function(){
          $("#box").stop()
      })
      $("#finishbox").click(function(){
          $("#box").finish()
      })