jQuery 效果

2022-03-28 17:00:26 阅读：162 来源： 互联网

标签：jQuery function slow hide 效果 div speed click

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>this is p</p>
        <button type="button" id="btn1">btn1</button>
        <button type="button" id="btn2">btn2</button>
        <button type="button" id="btn3">btn3</button>
        <div id="div1">
            this is div1;
        </div>
        <button type="button" id="btn4">btn4</button>
        <button type="button" id="btn5">btn5</button>
        <button type="button" id="btn6">btn6</button>
        <button type="button" id="btn7">btn7</button>
        
        <button type="button" id="btn8">click here</button>
        <div id="div2">
            jQuery 滑动方法可使元素上下滑动。
        </div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jQ_function.js"></script>
    </body>
</html>

$(document).ready(function(){
    $("#btn1").click(function(){
        //hide(speed,callback) speed有slow/fast/毫秒
        $("p").hide("slow")
    });
    $("#btn2").click(function(){
        $("p").show("fast");
    });
    //hide和show重复
    $("#btn3").click(function(){
        $("p").toggle("slow");
    });
    //淡入淡出
        //淡入
        $("#btn4").click(function(){
            $("div").fadeIn("slow");
        });
        //淡出
        $("#btn5").click(function(){
            $("div").fadeOut("slow");
        });
        //重复
        $("#btn6").click(function(){
            $("div").fadeToggle("slow");
        });
        //改变淡出透明度 fadeTo(speed,opacity,callback)
        $("#btn7").click(function(){
            $("div").fadeTo("slow",0.4);
        });
    //滑动效果
        $("#btn8").click(function(){
            //slideUp() slideDown()
            $("#div2").slideToggle("fast");
        })
    
});

标签：jQuery,function,slow,hide,效果,div,speed,click
来源： https://www.cnblogs.com/lwx11111/p/16067923.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery 效果