zoukankan      html  css  js  c++  java
  • ##Jquery动画效果

    Jquery动画效果

    ##一、Jquery 隐藏hide()-显示show()

    例子:

    <body>
        <input type="button"value="隐藏"id="hide">
        <input type="button"value="显示"id="show">
        <input type="button"value="显示/隐藏切换"id="toggle">
        <div id="b1"style="80px;height:80px;background-color:red;">1</div>
        <div id="b2"style="80px;height:80px;background-color:pink;">2</div>
        <div id="b3"style="80px;height:80px;background-color:yellow;">3</div>
    </body>

       ##1,显示与隐藏

        法:$(selector).hide(speed,callback);

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

         解释:speed参数规定隐藏/显示的速度,可以取以下的值:slow、fast或者毫秒。

            callback参数是隐藏或显示完成所执行的函数名称。

         测试:下面我们来试下看id为showDiv是否隐藏

            $("#showDiv").hide("slow","swing",function(){
                        alert("隐藏了");
                   });

        ##2,切换隐藏于显示

         语法:$(selector).toggle(speed,callback);

        ##3,注意:对于可选的 callback 参数,有以下两点说明:

          1.$(selector)选中的元素的个数为n个,则callback函数会执行n次;

          2.callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行;

          3.callback既可以是函数名,也可以是匿名函数;

    <script type="text/javascript">
            $(function () {
                //隐藏
                $("#hide").click(function () {
                    $("#b1").hide();//直接消失
                    $("#b2").hide("slow");//默认效果(快速)
                    $("#b3").hide(5000);//缓慢消失
                });
           //显示 $(
    "#show").click(function () { $("#b1").show(); $("#b2").show("slow"); $("#b3").show(5000); });
           //显示/隐藏切换 $(
    "#toggle").click(function () { $("#b1").toggle(); $("#b2").toggle("slow"); $("#b3").toggle(5000); }); }); </script>

    ##二、淡入、淡出效果

      ##1,淡入fadeIn();

      ##2,淡出fadeOut();

      ##3,切换淡入淡出fadeToggle();

      ##4,变淡fadeTo();

           //fadeIn显示
                $("#hide").click(function () {
                    $("#b1").fadeIn();//出现
                    $("#b2").fadeIn("slow");//默认效果(快速)
                    $("#b3").fadeIn(5000);
                });
                //fadeOut隐藏
                $("#show").click(function () {
                    $("#b1").fadeOut();//直接消失
                    $("#b2").fadeOut("slow");
                    $("#b3").fadeOut(5000);//缓慢消失
                });
                //fadeToggle切换
                $("#toggle").click(function () {
                    $("#b1").fadeToggle();
                    $("#b2").fadeToggle("slow");
                    $("#b3").fadeToggle(5000);
                });
                //fadeTo颜色变淡
                $("#topro").click(function () {
                    $("#b1").fadeTo("slow",0.4);
                    $("#b2").fadeTo("slow",0.9);
                    $("#b3").fadeTo(5000,0.1);
                });

    ##三、滑动效果

      ##1,滑动显示

      ##2,滑动隐藏

      ##3,滑动隐藏显示切换

        $(function () {
                //滑动显示
                $("#flip").click(function () {
                    $("#panel").slideDown("slow");
                });
                //滑动隐藏
                $("#panel").click(function () {
                    $("#panel").slideUp("slow");
                });
                // 滑动隐藏显示切换
                $("#flip").click(function () {
                    $("#panel").slideToggle("slow");
                });
            })

    ##四、动画  animate() 方法

      语法:$(selector).animate({params},speed,callback);

      注意:必需的 params 参数定义形成动画的 CSS 属性。

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

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

    <input type="button"value="开始动画"id="cation">
    <div style="background:#98bf21;height:100px;100px;position:absolute;"id="box"></div>>
             $("#cation").click(function () {
                    $("#box").animate({
                        left:'300px',
                        '200px',
                        height:'200px',
                        opacity:'0.3',
                    });
                });
           $("#box").animate({
            fontSize:'30px'
           });

    注意:

      当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

      同时,色彩动画并不包含在核心 jQuery 库中。

      如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。

    ##五、停止动画 Stop()

    $("#stop1").stop();
  • 相关阅读:
    light oj 1105 规律
    light oj 1071 dp(吃金币升级版)
    light oj 1084 线性dp
    light oj 1079 01背包
    light oj 1068 数位dp
    light oj 1219 树上贪心
    light oj 1057 状压dp TSP
    light oj 1037 状压dp
    矩阵快速幂3 k*n铺方格
    矩阵快速幂2 3*n铺方格
  • 原文地址:https://www.cnblogs.com/liurui-bk517/p/11115936.html
Copyright © 2011-2022 走看看