文字特效

html内容

1、卷起/展开

2、隐藏/显示

3、淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="../js/jquery-3.4.1.min.js"></script>-->

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>jQuery特效</h1>

<p>第一个p标签
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
    ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
    voluptatibus.</p>

<p>第二个p标签
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
    ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
    voluptatibus.</p>

    <button id="btn-slideUp">段落向上卷起</button>
    <button id="btn-slideDown">段落向下展开</button>
    <button id="btn-slideToggle">卷起/展开段落</button>

    <button id="btn-hide">隐藏段落</button>
    <button id="btn-show">显示段落</button>
    <button id="btn-toggle">切换显示/隐藏段落</button>

    <button id="btn-fadeOut">淡出段落</button>
    <button id="btn-fadeIn">淡入段落</button>
    <button id="btn-fadeToggle">淡入淡出切换显示/隐藏段落</button>

</body>
</html>

<!--jqury特效-->
<script>
    //定位到全局文档，文档准备完毕（刷新完成）的时候
    $(document).ready(function () {

        //点击时淡出段落，时间为2000毫秒（可不设置时间）
        $("#btn-fadeOut").click(function(){
           $("p").fadeOut(2000);
        });

        //点击时淡入段落，时间为2000毫秒（可不设置时间）
        $("#btn-fadeIn").click(function(){
           $("p").fadeIn(2000);
           alert("显示完毕")
        });

        //点击时切换淡入/淡出状态
        $("#btn-fadeToggle").click(function(){
           $("p").fadeToggle(1000);
        });

        //点击时隐藏段落，时间为2000毫秒（可不设置时间）
        $("#btn-hide").click(function(){
           $("p").hide(2000);
        });

        //点击时显示段落，时间为2000毫秒（可不设置时间）
        $("#btn-show").click(function(){
           $("p").show(2000);
           alert("显示完毕")
        });

        //切换显示/隐藏状态
        $("#btn-toggle").click(function(){
           $("p").toggle(1000);
        });

        //当前操作的p标签的元素像卷闸门一样往上消失
        $("#btn-slideUp").click(function () {
            $("p").slideUp(2000);
        });

        //当前操作的p标签的元素像卷闸门一样往下展开
        $("#btn-slideDown").click(function () {
            $("p").slideDown(2000);
        });

        //当前操作的p标签的元素切换向上卷起和向下展开
        $("#btn-slideToggle").click(function () {
            $("p").slideToggle(2000);
        });
    });
</script>

动画，其实就是一系列的css变化效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画，就是一系列的css变化效果</title>
    <style>
        #box{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 1px solid black;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <button id="btn">控制动画</button>
    <p>第二个p标签
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
    ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
    voluptatibus.</p>
    <div id="box"></div>
</body>
</html>
<script>
    jQuery(document).ready(function ($) {
        //点击控制动画的时候
        $("#btn").click(function () {
            //改变属性, animate({要改变的值，时间，回调函数})
            $("#box").animate({
                left:300,
                width:"300px",
                height:"100px",
                borderWidth:"2px",
                borderColor:"yellow",
                borderStyle:"solid"
            },
                4000,
                alert("动画完成")
            )
        });
    });
</script>

方法链：对同一个 元素连续操作

测开之路一百零一：jquery文字特效、动画、方法链的更多相关文章

  1. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  2. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  3. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  4. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  5. 测开之路一百零七：bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  6. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  7. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  8. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  9. 测开之路一百：jquery引用、语法、事件

    工作中一般会使用jquery代替js,jquery官网:https://jquery.com/ 引用jquery: 第一种方式:下载引用: jquery下载官网:https://jquery.com/ ...

随机推荐

  1. IDEA 增加对JPA的支持 执行JPQL语句

    IDEA 可以在控制台console中执行JPQL语句: 1. 在已存在的项目中选择项目结构: 2. 选择模块-指定实体所在的模块-选择上面的号 2. 选择要添加的模块:我们使用的是JPA,也可能有的 ...

  2. C# Excel数据验重及Table数据验重

    http://blog.csdn.net/jiankunking/article/details/38398087 最近在做导入Excel数据的时候,要检验数据是否重复: 1.要检验Excel数据本身 ...

  3. js/nodejs导入Excel相关

    导入示例如下: Excel可设置单元格的数字显示格式,特别的,常规格式下,会根据列宽缩进显示. 实际中,有时需要导入实际值,有时需要导入显示值. 而B2的显示值,由于跟列宽相关,目前未找到任何软件,可 ...

  4. Sql 字符串自增列的实现

    ALTER FUNCTION [dbo].[f_NextID](@tabname VARCHAR()) RETURNS ) AS BEGIN DECLARE @charval CHAR() IF LO ...

  5. Servlet实现Cookie自动登录，并显示保存的用户信息

    转自:https://blog.csdn.net/qq_29612963/article/details/51100565

  6. Python 通过dmidecode获取Linux服务器硬件信息

    通过 dmidecode 命令可以获取到 Linux 系统的包括 BIOS. CPU.内存等系统的硬件信息,这里使用 python 代码来通过调用 dmidecode 命令来获取 Linux 必要的系 ...

  7. 02 getsockopt

    #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> int getsockopt(int sockfd ...

  8. java Arrays源码浅出

    1.toString 返回指定数组内容的字符串表示形式. demo: 由demo可窥见Arrays.toString的所做的工作就是将数组元素转换为字符串(以逗号分割数组元素,包裹在方括号中). 源码 ...

  9. Flask【第4篇】：用Flask的扩展实现的简单的页面登录

    用flask的扩展实现的简单的页面登录 from flask import Flask,render_template,request,redirect,session app = Flask(__n ...

  10. POJ-3436-ACM Computer Factory(最大流, 输出路径)

    链接: https://vjudge.net/problem/POJ-3436#author=0 题意: 为了追求ACM比赛的公平性,所有用作ACM比赛的电脑性能是一样的,而ACM董事会专门有一条生产 ...