文字特效

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. CentOS7部署CDH6.0.1大数据平台

    Cloudera’s Distribution Including Apache Hadoop,简称“CDH”,基于Web的用户界面,支持大多数Hadoop组件,包括HDFS.MapReduce.Hi ...

  2. Zabbix--03 邮件报警、微信报警

    目录 一. 邮件报警 1.定义发件人 2.定义收件人 3.优化告警信息 二. 微信报警 1.查看配置文件里的脚本目录路径 2.将weixin.py放在zabbix特定目录 3.配置发信人 4.配置收信 ...

  3. Ubuntu18 给terminal改个漂亮的命令行提示符

    重新安装了VMware和Ubuntu,但是命令行提示符太单调,不美观,如何更改呢.于是在网上巴拉巴拉搜寻一番. 1.更改PS1环境变量,这俩都可以,我选择第一个: export PS1="\ ...

  4. PAT Advanced 1058 A+B in Hogwarts (20 分)

    If you are a fan of Harry Potter, you would know the world of magic has its own currency system -- a ...

  5. 复试笔试复习 & bd面试总结

    计算机网络: 1.OSI模型中提供端到端服务的是传输层 2.波特率的含义是每秒钟信号变化的次数 3.非屏蔽双绞线中5类网线的数据速率为100Mbps,连接器是RJ-45 4.虚电路在数据链路层实现,电 ...

  6. java并发学习--第十章 java内存模型的内存语义

    一.锁的内存语义 所为的java内存模型的内存语义指的就是在JVM中的实现原则. 锁的内存语义:锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息. 我们把上面这句话再整理下: ...

  7. 使用logrotate轮询nginx和apache日志

    使用logrotate轮询nginx和apache日志     文章目录 [隐藏] 配置nginx 配置apache 使用logrotate轮询日志很方便,配置也很简单. 配置nginx 1.建立/e ...

  8. Python---进阶---logging---装饰器打印日志2

    ### logging - logging.debug - logging.info - logging.warning - logging.error - logging.critical ---- ...

  9. SpringCloud学习系列-微服务

    最近和尚硅谷周阳老师学习了Spring Cloud感觉有必要在这里做下笔记和总结. 软件系统架构演变 单一应用架构当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用 ...

  10. 【微信小程序】基础组件--view text image

    组件的通用属性: id class style hidden bind* catch* data-* view 小程序基础组件,基本等于最常用组件,类似于HTML中的div.view用于构建页面骨架, ...