zoukankan      html  css  js  c++  java
  • jquery 学习(七)

    <!--转载于 听说你的代码很6-->
    <!--http://www.jq22.com/webqd2377-->

    CSS

        <style>
            #content #first {
                color:white;
                background-color:green;
                width:240px;
                height:100px;
                margin:10px 0 0 0;
                padding:10px;
            }
        </style>

    html

        <div id="content">
        <input id="testhide" type="button" value="隐藏">
        <input id="testshow" type="button" value="显示">
        <input id="testtoggle" type="button" value="隐藏/显示">
        <input id="testslideup" type="button" value="上滑隐藏">
        <input id="testslidedown" type="button" value="下滑显示">
        <input id="testslidetoggle" type="button" value="上/下滑显示">
        <input id="testfadein" type="button" value="淡入显示">
        <input id="testfadeout" type="button" value="淡出显示">
        <input id="testfadetoggle" type="button" value="淡入/出显示">
        <input id="testanimate" type="button" value="自定义显示">
        <div id="first">
            想要做一件事,永远都不要怕晚。只要你开始做了,就不晚。而若是你不开始,仅仅停留在思考、犹豫甚至焦虑的状态,那就永远都是零。
        </div>

    jquery

        <script src="jquery-3.3.1.js"></script>
            <script>
                $(document).ready(function() {
            $("#testhide").click(function() {
                // 动画效果
                $("#first").hide("slow");
            });
            $("#testshow").click(function() {
                // 动画效果
                $("#first").show("slow");
            });
            $("#testtoggle").click(function() {
                // 动画效果
                $("#first").toggle("slow");
            });
            $("#testslideup").click(function() {
                // 动画效果
                $("#first").slideUp("slow");
            });
            $("#testslidedown").click(function() {
                // 动画效果
                $("#first").slideDown("slow");
            });
            $("#testslidetoggle").click(function() {
                // 动画效果
                $("#first").slideToggle("slow");
            });
            $("#testfadein").click(function() {
                // 动画效果
                $("#first").fadeIn("slow");
            });
            $("#testfadeout").click(function() {
                // 动画效果
                $("#first").fadeOut("slow");
            });
            $("#testfadetoggle").click(function() {
                // 动画效果
                $("#first").fadeToggle("slow");
            });
            $("#testanimate").click(function() {
                // 动画效果
                $("#first").animate({
                    fontSize: "12px"
                }, "slow");
            });
        });
            </script>
  • 相关阅读:
    Oracle 安装报错 [INS-06101] IP address of localhost could not be determined 解决方法输入日志标题
    Linux下安装oracle数据库提示DISPLAY not set. Please set the DISPLAY and try again。
    redhat 关机注销命令详解
    VirtualBox的四种网络连接方式
    修改RedHat的系统显示时间
    insufficient memory to configure kdump(没有足够的内存)解决方法(待验证、待解决)
    xen坑随笔 heartbeat dpkg垃圾数据库清除
    tomcat 监控脚本
    负载均衡随笔
    GIT命令介绍
  • 原文地址:https://www.cnblogs.com/Anec/p/9871331.html
Copyright © 2011-2022 走看看