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>
  • 相关阅读:
    springmvc&参数绑定&异常处理&Json数据交互&上传图片
    从零开始搭建一个vue.js的脚手架
    supervisor配置详解(转)
    supervisor 从安装到使用
    linux下如何查看某软件是否已安装
    linux yum命令详解
    Vue.js 和 MVVM 小细节
    PHP7的异常处理机制,set_error_handler和set_exception_handler方法介绍
    使用 acme.sh 签发续签 Let‘s Encrypt 证书 泛域名证书
    SSH原理与运用(一):远程登录
  • 原文地址:https://www.cnblogs.com/Anec/p/9871331.html
Copyright © 2011-2022 走看看