文字特效

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. html5移动端Meta的设置

    强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 1 <meta name="viewport" content=&quo ...

  2. STL 之 queue

    默认容器为双端队列deque 常用的函数有: empty Test whether container is empty (public member function ) size Return s ...

  3. https://www.cnblogs.com/cncc/p/7804511.html?foxhandler=RssReadRenderProcessHandler

    https://www.cnblogs.com/cncc/p/7804511.html?foxhandler=RssReadRenderProcessHandler 一.本文主要是使用Costura. ...

  4. Ubuntu 18.04机器学习环境安装

    安装net-tools sudo apt install net-tools #查看IP ifconfig #ssh服务是否安装 ps -e | grep ssh #安装openssh-server ...

  5. XIB约束布局问题（button)

    button默认不给宽度:系统Xib自动适配,最小宽度30.在使用宽度计算时,无法小于这个值

  6. SQL常见面试题-行列互换

      有一个SQL题在面试中出现的概率极高,最近有学生出去面试仍然会遇到这样的题目,在这里跟大家分享一下. 题目:数据库中有一张如下所示的表,表名为sales. 年 季度 销售量 1991 1 11 1 ...

  7. SQL Server 批量 删除表索引

    当旧的数据库中的数据几乎很少使用到的时候,索引又占用着较大的磁盘空间,数据又不能删除,又想节省磁盘空间. 这个时候可以将所有表的索引进行删除了(先创建索引备份脚本,以备需要还原),可以批量一起删除. ...

  8. Comet OJ - Contest #2 B　她的想法、他的战斗（概率　＋　数学）

    题目描述 Takuru 是一名情报强者,所以他想利用他强大的情报搜集能力来当中间商赚差价. Takuru 的计划是让 Hinae 帮他去市场上买一个商品,然后再以另一个价格卖掉它.Takuru 会给 ...

  9. JavaWeb中的文件上传和下载功能的实现

    导入相关支持jar包:commons-fileupload.jar,commons-io.jar 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上 ...

  10. 与Swing的初见

    ---------------------------参考菜鸟教程的swing课程学习-------------------- Swing 是一个为Java设计的GUI工具包. Swing是JAVA基 ...