动画效果

先加一个div:

<div style="display: inline-block;"></div>

用css给div写个样式

 div{
            height: 200px;
            width: 200px;
            background-color: red;
    }

---

 

好,开始动画效果

添加三个按钮

<button class="show">显示</button>
 <button class="hide">隐藏</button>
 <button class="toggle">切换</button>

我们用js写下功能

  $(function(){

            //行内样式  display
            //隐藏 display:none   显示  display:原始值  如果没有原始值,则删除display样式
            //动画路线从左上角->右下角
        $(".show").click(function(){
            //show显示
           // $("div").show();
            //$("div").show("slow");normal fast
            $("div").show(1000);//1000毫秒从左上角->右下角显示时间
        })
        $(".hide").click(function(){
            //hide隐藏
            $("div").hide(1000);//1000毫秒从右下角->左上角显示时间
        })
        $(".toggle").click(function(){
            //toggle切换
            $("div").toggle();
        })
})

快去试试效果吧/1

---

 

再来添加三个按钮(div和样式就和上面的一样吧,懒得改了)

<button class="slideDown">向下</button>
<button class="slideUp">向上</button>
 <button class="slideToggle">切换</button>

js写效果

 $(function(){
//行内样式  改的高度height
        //动画路线 上<->下
        $(".slideDown").click(function(){
            $("div").slideDown(1000);
        })
        $(".slideUp").click(function(){
            $("div").slideUp(1000);
        })
        $(".slideToggle").click(function(){
            //$("div").stop().slideToggle(1000);//stop() 删除所有排队的动画,在最后一次动画基础上继续新动画
            $("div").finish().slideToggle(1000);//finish() 删除所有排队的动画 完成所有动画,开始新动画
        })
})

---

<button class="fadeIn">淡入淡出</button>
 <button class="fadeOut">淡出</button>
 <button class="fadeToggle">褪色</button>
 <button class="fadeTo">淡入淡出(0.3)</button>

js写效果

$(function(){
  //行内样式  opacity 0<->1
        $(".fadeIn").click(function(){
            $("div").fadeIn(1000);
        })
        $(".fadeOut").click(function(){
            $("div").fadeOut(1000);
        })
        $(".fadeToggle").click(function(){
            $("div").fadeToggle(3000);
        })
        $(".fadeTo").click(function(){
            $("div").fadeTo("normal",0.3);
        })
})

---

自定义动画

还是写一个按钮

 <button class="animate">animate</button> 

用js写效果

$(function(){
$(".animate").click(function(){
           // $("div").animate({width:"400px"},1000);//自定义宽高
           //不能直接+,必须+=
           //opacity:0.3不透明度
           $("div").animate({width:'400px',height:"400px", opacity:0.3},1000);
           $("div").animate({width:'+=40px',height:"+=40px", opacity:0.3},1000);
        })
})