JQuery显示，隐藏和淡入淡出效果

　　为了把JQuery搞熟悉，看着菜鸟教程，一个一个例子打，边看边记，算是一晚上的一个小总结吧。加油，我很本但是我很勤奋啊。系统的了解它，就要花时间咯。

　　

<!DOCTYPE html>
<html>
<head>
    <title>JQuery常见效果</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // $(function(){
        //     $('p').click(function(){
        //         $(this).hide();
        //     })
        // })
        // 复杂一点的隐藏样式
        // $(function(){
        //     $('.hide').click(function(){
        //         $(this).parents('.ex').hide('slow');
        //     })
        // })

        // 注意.hide(speed,callback) .show(speed,callback)
        // speed规定显示或隐藏的速度，可以取'slow','fast'或者
        // 毫秒。
        // slow和fast一定不要忘记引号。
        // callback是显示或隐藏完成后所执行的函数名称。

        // $(function(){
        //     $('#hide').click(function(){
        //         $('p').hide();
        //     })
        //     $('#show').click(function(){
        //         $('p').show();
        //     })
        // })
        // $(function(){
        //     $('#box').click(function(){
        //         $(this).hide(2000,function(){
        //             // 让这个盒子在两秒隐藏后显示出来
        //             $(this).show(2000,function(){
        //                 $(this).css('background-color','yellow');
        //             });
        //         })
        //     })
        // })

        // toggle(speed,callback),切换元素的可见状态，用法和show
        // ，hide相同

        // $(document).ready(function(){
        //     $('#box').click(function(){
        //         $('.p1').toggle();
        //     })
        // })

        // 接下来便是淡入淡出效果
        // fadeIn(speed,callback);用于淡入已隐藏的元素
        // $(function(){
        //     $('#fadein').click(function(){
        //         $('#box1').fadeIn();
        //         $('#box2').fadeIn('slow');
        //         $('#box3').fadeIn('4000',function(){
        //         $(this).css('background-color','yellow');
        //         });
        //     })
        // })
        // 相反fadeOut(speed,callback);用于淡出可见元素，
        // 用法和fadeIn(speed,callback)一致
        // $().ready(function(){
        //     $('#fadein').click(function(){
        //         $('#box1').fadeOut(6000);
        //         $('#box2').fadeOut(3000);
        //         $('#box3').fadeOut(1000);
        //     })
        // })
        // 接下来便是fadeToggle(speed,callback),同理切换元素的可见性
        // 如果元素已淡入，则fadeToggle()会向元素添加淡出效果
        // 如果元素已淡出，则fadeToggle()会向元素添加淡出效果
        // $(document).ready(function(){
        //     $('#fadein').click(function(){
        //         $('#box1').fadeToggle(1000);
        //         $('#box2').fadeToggle(3000);
        //         $('#box3').fadeToggle(6000);
        //     })
        // })

        // 接下来便是fadeTo(speed,opacity,callback);
        // 意思是准许渐变为给定的不透明度(必需要规定效果的时长，不然
        //没有效果，方法无效)
        $(function(){
            $('#fadein').click(function(){
                $('#box1').fadeTo(2000,0.5);
                $('#box2').fadeTo(2000,0.7);
                $('#box3').fadeTo(4000,0.2);
            })
        })
    </script>
    <style type="text/css">
        /*.ex{
            padding: 10px;
            background-color: red;
            border: 1px solid yellow;
        }*/

    </style>
</head>
<body>
    <!-- 第一个简单的隐藏效果 -->
    <!-- <p>第一次点击</p>
    <p>第二次点击</p>
    <p>第三次点击</p> -->
    <!-- <h1>你好</h1>
    <div class="ex">
        <button class="hide">点我隐藏</button>
        <p>安徽<br>
            一个美丽的地方
        </p>
    </div>
    <h2>Hellow</h2>
    <div class="ex">
        <button class="hide">点我隐藏</button>
        <p>商贸<br>
            8栋611寝室</p>
    </div> -->

    <!-- 定义一个段落，加上显示和隐藏的按钮 -->
    <!-- <p>点击按钮，切换效果</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button> -->

    <!-- 下面来写一个可以用到hide(speed,callback) -->

    <!-- <div id="box" style="width: 200px;height: 400px;background-color: red;">

    </div> -->

    <!-- <button id="box">隐藏/显示</button>
    <p class="p1">这是一大段文本</p> -->
    <button id="fadein">开关</button>
    <div id="box1" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
    <div id="box2" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
    <div id="box3" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // fadeIn例子
        // $(function(){
        //     $('#button').click(function(){
        //         $('#box1').fadeIn(1000);
        //         $('#box2').fadeIn(2000);
        //         $('#box3').fadeIn(4000);
        //     })
        // })

        // fadeOut例子
        // $(document).ready(function(){
        //     $('#button').click(function(){
        //         $('#box1').fadeOut(1000);
        //         $('#box2').fadeOut(4000);
        //         $('#box3').fadeOut(6000);
        //     })
        // })

        // fadeToggle用法
        // $().ready(function(){
        //     $('#button').click(function(){
        //         $('#box1').fadeToggle('slow');
        //         $('#box2').fadeToggle('fast');
        //         $('#box3').fadeToggle();
        //     })
        // })

        // fadeTo用法
        $().ready(function(){
            $('#button').click(function(){
                $('#box1').fadeTo(4000,0.5);
                $('#box2').fadeTo(1000,0.5);
                $('#box3').fadeTo(8000,0.5);
            })
        })
    </script>
</head>
<body>
    <button id="button">点击我</button>
    <div id="box1" style="display:none;width: 200px;height: 200px;background-color: red;"></div>
    <div id="box2" style="display:none;width: 200px;height: 200px;background-color: yellow;"></div>
    <div id="box3" style="display:none;width: 200px;height: 200px;background-color: blue;"></div>
</body>
</html>