JQuery基础知识（1）

JQuery基础知识（1）

对JQuery学习中遇到的小细节进行了整理和总结

1、JQuery hide()和show()方法，分别对选中的元素进行隐藏和显示，语法：hide()和show分别有对应的参数，即hide(speed);隐藏的速度进行了限定。hide(1000)/show(1000);

2、JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度。

---

JQuery的淡入淡出

1、JQuery fadeIn();此方法可以携带不同的参数以控制淡入效果。

语法：

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

2、JQuery fadeOut();携带参数控制淡出效果。

语法：

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

3、JQuery fadeTpggle();携带参数进行淡入淡出切换。

语法：

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

4、JQuery fadeTo()方法允许渐变为给定的不透明度（0-1之间）。

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery的淡入淡出练习</title>
        <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                //淡入效果
                $("#btnfadeIn").click(function(){
                    $("#div1").fadeIn(1000);
                    $("#div2").fadeIn("slow");
                    $("#div3").fadeIn(3000);
                });
                //淡出效果
                $("#btnfadeOut").click(function(){
                    $("#div1").fadeOut(1000);
                    $("#div2").fadeOut(2000);
                    $("#div3").fadeOut(3000);
                });
                //二者切换
                $("#btnfadeToggle").click(function(){
                    $("#div1").fadeToggle(1000);
                    $("#div2").fadeToggle(2000);
                    $("#div3").fadeToggle(3000);
                });
                //设定不同的透明度
                $("#btnfadeTo").click(function(){
                    $("#div1").fadeTo("slow",0.1);
                    $("#div2").fadeTo("slow",0.6);
                    $("#div3").fadeTo("slow",0.3);
                });
            });
        </script>
    </head>
    <body>
        <div>
            <p>带不同参数的fadeIn()方法</p>
            <input type="button" value="淡入效果" id="btnfadeIn" />
            <input type="button" value="淡出效果" id="btnfadeOut" />
            <input type="button" value="二者切换" id="btnfadeToggle" />
            <input type="button" value="给定透明度" id="btnfadeTo" />
            <div id="div1" style="width: 100px; height: 100px; background-color: red; display:none;" ></div>
            <div id="div2" style="width: 100px; height: 100px; background-color: royalblue; display:none;"></div>
            <div id="div3" style="width: 100px; height: 100px; background-color: darkgoldenrod; display:none;"></div>
        </div>

    </body>
</html>