7.jQuery效果

来源：互联网发布：校园网络诈骗种类编辑：程序博客网时间：2024/06/05 00:56
<!DOCTYPE html><html>    <!--jQuery效果            animate()   对被选元素应用“自定义”的动画            clearQueue()    对被选元素移除所有排队的函数（仍未运行的）            delay() 对被选元素的所有排队函数（仍未运行）设置延迟            dequeue()   运行被选元素的下一个排队函数            fadeIn()    逐渐改变被选元素的不透明度，从隐藏到可见            fadeOut()   逐渐改变被选元素的不透明度，从可见到隐藏            fadeTo()    把被选元素逐渐改变至给定的不透明度            hide()  隐藏被选的元素            queue() 显示被选元素的排队函数            show()  显示被选的元素            slideDown() 通过调整高度来滑动显示被选元素            slideToggle()   对被选元素进行滑动隐藏和滑动显示的切换            slideUp()   通过调整高度来滑动隐藏被选元素            stop()  停止在被选元素上运行动画            toggle()    对被选元素进行隐藏和显示的切换        隐藏显示效果            $(selector).hide(speed,callback);            $(selector).show(speed,callback);            可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。            可选的 callback 参数是隐藏或显示完成后所执行的函数名称。        淡入淡出效果            $(selector).fadeIn(speed,callback);            可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。            可选的 callback 参数是 fading 完成后所执行的函数名称。            $(selector).fadeOut(speed,callback);            可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。            可选的 callback 参数是 fading 完成后所执行的函数名称。            jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。            如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。            如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。            $(selector).fadeTo(speed,opacity,callback);            必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。            fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。            可选的 callback 参数是该函数完成后所执行的函数名称。    -->    <head>        <meta charset="UTF-8">        <title>jquery效果</title>        <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(document).ready(function() {                $("#hide").click(function() {                    $("#p1").hide("slow");                });                $("#show").click(function() {                    $("#p1").show("fast", function() {                        $("#p1").css("color", "red");                    });                });                //使用toggle来实现切换显示隐藏                $("#hideOrShow").click(function() {                    $("#p2").toggle();                });                $("#button1").click(function() {                    $("#div1").fadeIn();                    $("#div2").fadeIn("slow");                    $("#div3").fadeIn(3000);                });                $("#button2").click(function() {                    $("#div1").fadeOut();                    $("#div2").fadeOut("slow");                    $("#div3").fadeOut(3000);                });                $("#button3").click(function() {                    $("#div1").fadeToggle();                    $("#div2").fadeToggle("slow");                    $("#div3").fadeToggle(3000);                });                $("#button4").click(function() {                    $("#div1").fadeTo("slow", 0.2);                    $("#div2").fadeTo("slow", 0.5);                    $("#div3").fadeTo("slow", 0.7);                });            });        </script>    </head>    <body>        <h2>显示隐藏效果</h2>        <p id="p1">段落段落</p>        <button id="hide">隐藏</button>        <button id="show">显示</button>        <hr />        <h2>显示隐藏效果2,使用toggle</h2>        <p id="p2">段落段落</p>        <button id="hideOrShow">切换</button>        <hr />        <h2>使三个矩形淡入</h2>        <button id="button1">淡入</button>        <button id="button2">淡出</button>        <button id="button3">淡入淡出切换</button>        <button id="button3">透明度</button>        <br><br>        <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>        <br>        <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>        <br>        <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>    </body></html>
0 0