zoukankan      html  css  js  c++  java
  • JQuery动画

    一,show和hide动画

    案例:点击收缩和展开(类似于QQ面板的效果)

     <script language="javascript">
            $(document).ready(function () {
                $("#t1").click(function () {
                    if ($("#t2").css("display")!="none") {
                        $("#t2").hide(3000, function () {
                            $("#t1").html("点击展开");
                        });  //3000代表时间,3000毫秒  逗号后面跟的是回调函数,hide执行完之后调用
                    }
                    else {
                        $("#t2").show(3000, function () {
                            $("#t1").html("点击收缩");
                        });
                    }
                });
            })
        </script>

    二,fadeIn和fadeOut动画(它只是一种颜色的渐变,透明到不透明的渐变)

    案例:同上

      <script language="javascript">
            $(document).ready(function () {
                $("#t1").click(function () {
                    if ($("#t2").css("display")!="none") {
                        $("#t2").fadeOut(3000, function () {
                            $("#t1").html("点击展开");
                        });  
                    }
                    else {
                        $("#t2").fadeIn(3000, function () {
                            $("#t1").html("点击收缩");
                        });
                    }
                });
            })
        </script>

    三,slideUp和slideDown动画(类似于卷帘门的效果)

    案例:同上

    <script language="javascript">
            $(document).ready(function () {
                $("#t1").click(function () {
                    if ($("#t2").css("display")!="none") {
                        $("#t2").slideUp(3000, function () {
                            $("#t1").html("点击展开");
                        });  
                    }
                    else {
                        $("#t2").slideDown(3000, function () {
                            $("#t1").html("点击收缩");
                        });
                    }
                });
            })
        </script>

    四,自定义动画animate()

    animate(params,speed,callback)有三个参数

    params:包含样式{属性:值的一组参数}  如:{background-color:"red",color:"blue",height:"160px"}

    speed:动画显示的速度,以毫秒为单位

    callback:回调函数

     

  • 相关阅读:
    Vivado Non-Project Flow
    使用ngspice进行电路仿真
    Synopsys DC综合脚本示例
    解决Vivado XSDK在Ubuntu系统上自带UART Terminal Crash问题
    Ubuntu-18.04 LTS UEFI 安装U盘制作
    嵌入式处理器通过UART实现scanf和printf
    用于RISC-V的Makefile示例
    利用SSH隧道技术穿越内网访问远程设备
    C++基础-多态
    C++基础-继承
  • 原文地址:https://www.cnblogs.com/William-1234/p/4575322.html
Copyright © 2011-2022 走看看