动画基础隐藏与显示

开发工具与关键技术： Visual Studio / 隐藏与显示的show()、hide()、toggle()
作者：郑名方
撰写时间：2019年7月1日
jQuery中隐藏元素的hide方法，可以让页面上的元素不可见，一般可以设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法。它就是hide()，用它来达到这个效果。
下面是hide()的用法：
$(“.demo”).hide();//的这个用法是不带参数也不带动画效果。
$(“.demo”).hide(“show”);// hide(spend)的这个用法带传送，但是不带动画效果。
$(“.demo”).hide(2000);//hide(spend) 的用法带参数，隐藏动画的时间在2秒内完成，也是不带动画效果。
$(“.demo”).hide(“fast”,function(){ alert(“Animation Done”);//hide(spend,function(){})的用法在200毫秒将段落迅速隐藏起来，之后弹出一个对话框。

      <div class="container text-center">
         <div class="demo">div1</div>
        <button class="btn btn-primary">隐藏div1</button>
        <button class="btn btn-primary">显示div1</button>
        <div class="demo1"></div>
        <button class="btn btn-primary" id="btntoggle">显示与隐藏切换toggle方法</button>
       
    </div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <script>
        
        $(function () {//页面载入函数
            //第一个按钮的点击事件（隐藏div1按钮的点击事件）
            $("button").first().click(function () {
                 $(".demo").hide(); 
                $(".demo").hide("slow"); 
                $(".demo").hide(2000); 
                $(".demo").hide("fast", function () {
                   alert("Animation Done."); 
                });
                $(".demo").hide({ 
                    duration: 1000,
                    complete: function () { 
                       alert('执行3000ms动画完毕');
                    }
                }); 
            });
            //第二个按钮的点击事件（显示div1按钮的点击事件）
            $("button:eq(1)").click(function () {
                $(".demo").show(3000);
                //$(".demo").hide(3000).show(3000);
            });
        });

看完前面的不带动画效果代码注释和自己一个一个演示代码看效果。还有待动画效果的代码：$(“.demo”).hide({ duration:100,}); 这个用法待动画执行动画时长1秒钟。
jQuery中显示元素的show方法，在css中有display：none属性，同时也有display：block，所以jQuery同样提供了与hide方法相反的show方法，show方法的使用几分与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示。

jQuery中显示与隐藏切换toggle方法，show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素 toggle([speed],[easing],[fn])。

参数说明：speed: 隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。“easing:(Optional) 用来指定切换效果，默认是"swing”，可用参数"linear”。fn:在动画完成时执行的函数，每个元素执行一次。
上面的代码图片来源老师。