jquery—动画效果

元素的显示和隐藏效果

• show() 显示
• hide() 隐藏
• toggle() 开关，显示则隐藏，隐藏则显示

	<div></div>
    <input type="button" value="隐藏" onclick="f1()" />
    <input type="button" value="显示" onclick="f2()" />
    <input type="button" value="开关效果" onclick="f3()" />
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
               //隐藏
                function f1(){
                    //隐藏
                    $("div").hide();//display:none
                    //document.getElementById('id').style.display="none";
                }
                function f2(){
                    //显示
                    $("div").show();//display:block
                }
                function f3(){
                    $("div").toggle();
                }
    </script>

滑动效果显示和隐藏

• slideUp() 向上滑动元素并最终隐藏
• slideDown() 向下滑动元素并最终显示
• slideToggle() 滑动开关效果

<div></div>
    <input type="button" value="隐藏" onclick="f1()" />
    <input type="button" value="显示" onclick="f2()" />
    <input type="button" value="开关效果" onclick="f3()" />
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
           function f1(){
                //隐藏
                $("div").slideUp(1000);
            }
            function f2(){
                //显示
                $("div").slideDown(1000);
            }
            function f3(){
                $("div").slideToggle(1000);
            }
    </script>

淡入淡出效果

    让元素通过一定透明度变化，达到显示和隐藏的效果

• fadeIn: 在一段时间内增加元素的不透明度，直到元素完全显示出来。
• fadeOut：在一段时间内降低元素的不透明度，直到元素完全显示消失。
• fadeToggle：淡入淡出开关效果

<div></div>
    <input type="button" value="隐藏" onclick="f1()" />
    <input type="button" value="显示" onclick="f2()" />
    <input type="button" value="开关效果" onclick="f3()" />
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
             function f1(){
                //隐藏
                $("div").fadeOut(2000);
            }
            function f2(){
                //显示
                $("div").fadeIn(2000);
            }
            
            function f3(){
                $("div").fadeToggle(2000);
            }
 
    </script>