Practical Training JS课程（11.14）动画-效果

以下所有的内容效果的style内容都为：

<style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
           
        }
    </style>

1. 显示、隐藏、和切换：行内样式 更改的是：display 属性

jQuery内容：

 $(function(){
            // 显示  行内样式 更改的是：display 属性
            // 隐藏 display：none  显示 display：原始值
            // 如果没有原始值，则删除display样式
            // 动画路线 : 左下角<->右上角  带时间的路线
            $(".show").click(function(){
                // $("div").show();
                // $("div").show("slow");  normal  fast
                $("div").show(1000); 
            });
            // 隐藏
            $(".hide").click(function(){
                $("div").hide();
            });
            // 切换  会自动判断
            $(".toggle").click(function(){
                $("div").toggle();
            });
 })

标签：其中：（display: inline-block;）是在一行显示的意思

<button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>
    
    <div style=" display: inline-block;"></div>
    <div ></div>

效果：

 

2.行内样式的动画路线：更改的是：height 属性

jQuery内容：

 // 行内样式 更改的是：height 属性
            // 动画路线 : 上<->下 
            $(".slideDown").click(function(){
                $("div").slideDown();
            });
            // 
            $(".slideUp").click(function(){
                $("div").slideUp();
            });
            $(".slideToggle").click(function(){
                // $("div").slideToggle();
                // 解决动画延迟的方法
                // 删除所有排队的动画,在最后一次动画基础上,继续新动画
                // $("div").stop().slideToggle(3000);
                // 删除所有排队的动画,完成所有动画,开始新动画==>没有完成的直接清动画
                $("div").finish().slideToggle(3000);
            });

标签：

<br>
    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>
    <div ></div>
    <br>

效果：

 

3.行内样式 更改的是：opacity：

jQuery内容：

 // 行内样式 更改的是：opacity 
            $(".fadeIn").click(function(){
                $("div").fadeIn();
            });
            $(".fadeOut").click(function(){
                $("div").fadeOut();
            });
            $(".fadeToggle").click(function(){
                $("div").fadeToggle();
            });
            $(".fadeTo").click(function(){
                // ("normal",0.3) 这个和官网不太一样 因为使用的时候必须带 "normal",时间 才能正确运行
                $("div").fadeTo("normal",0.3);
            });

标签：

 <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeToggle">fadeToggle</button>
    <button class="fadeTo">fadeTo</button> 
    <div ></div>
    <br>

效果：

 

4. 可以实现多种效果：

jQuery内容：

 // 可以实现多种效果
            $(".animate").click(function(){
                // $("div").animate({width:"400px"},1000);
                // $("div").animate({width:"400px",height:"400px",opacity:0.3},1000);
                // 透明度不变，但是宽高一直会增加
                $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000);
                $("div").animate({width:"-=40px",height:"-=40px",opacity:0.3},1000);
            });

标签：

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

效果：

 

所有的button和效果的展示图：