文字特效

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. MySQL---数据库切分

    3.切分 水平切分   水平切分又称为sharding,它是将同一个表的记录拆分到多个结构相同的表中.当一个表的数据不断的增加的时候,sharding是必然的选择,它可以将数据分布到集群的不同节点上, ...

  2. 原生ajax与伪ajax

    原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...

  3. C#设计模式：访问者模式（Vistor Pattern）

    一,访问者模式是用来封装一些施加于某种数据结构之上的操作.它使得可以在不改变元素本身的前提下增加作用于这些元素的新操作,访问者模式的目的是把操作从数据结构中分离出来. 二,代码 using Syste ...

  4. linux基本命令之文件浏览（cat,more,less,tail，head），文件操作命令(cp,mv,rm,find)

    linux文件浏览,文件操作命令 文件管理之文件浏览命令 1.cat命令:显示文本文件所有内容 格式:cat 文件名 适用场景:适合只有少量数据的文件,例如只有几行内容的可以使用此命令. 2.more ...

  5. Laravel 学习笔记之文件上传

    自定义添加磁盘——upload 位置:config/filesystems.php 'disks' => [ 'local' => [ 'driver' => 'local', 'r ...

  6. SSM框架返回json数据

    常见错误:No converter found for return value of type: class .................. 原因分析:这是因为springmvc默认是没有对象 ...

  7. Java Web学习总结（4）HttpServletResponse

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.获取网页提交过来的数据,只需要找request对象就行了.要向网 ...

  8. 系统环境： CentOS 64位+千万不要在生产环境中升级glibc!

    # cd /lib64# LD_PRELOAD=/lib64/libc-2.15.so ln -sf /lib64/libc-2.15.so libc.so.6 libc-2.15.so 这个文件名根 ...

  9. UVa10426

    GCD Extreme(II) Input: Standard Input Output: Standard Output Given the value of N, you will have to ...

  10. eclipse多个项目提交到同一个仓库(码云)

    参考博客:Eclipse提交多个项目到同一个仓库 https://blog.csdn.net/qq_30764991/article/details/80379365 步骤一:码云建立个远程仓库 步骤 ...