文字特效

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. SpringBoot_03mybatisPlus

    注意: mybatisPlus默认加载resources下的mapper文件夹下的xml文件 默认将数据库表的字段用驼峰标识转换成实体类的属性 官方网站: https://mp.baomidou.co ...

  2. android studio配置模拟器

    配置模拟器在Android开发中,肯定是要写好代码看结果的,如果使用as中自带的模拟器太low,启动速度又慢,网上有很多教程推荐使用genymotion模拟器的,可是如果是新手我建议选择更好入门的第三 ...

  3. mailstats - 显示邮件状态信息

    总览 mailstats [-o] [-C cffile] [-f stfile] 描述 mailstats工具显示当前的邮件状态信息. 首先,先显示统计启动时所记录的时间,当然是以ctime(3)所 ...

  4. Beta冲刺-（3/3）

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnbl ...

  5. 北京师范大学第十五届ACM决赛-重现赛J Just A String （kmp算法延伸）

    链接:https://ac.nowcoder.com/acm/contest/3/J 来源:牛客网 Just A String 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 2621 ...

  6. 2019长安大学ACM校赛网络同步赛 B Trial of Devil　（递归）

    链接:https://ac.nowcoder.com/acm/contest/897/B来源:牛客网 Trial of Devil 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32 ...

  7. Django【第6篇】：Django之ORM单表操作（增删改查）

    django之数据库表的单表查询 一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name =& ...

  8. django之表单类

    一:表单类 一般我们在html中自己写的表单类似于下面的样子 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. sys模块-与python解释器交互的模块

    需要  import sys a=sys.platform   #获取当前系统平台 #如果是window系统就返回‘win32’#如果是linux系统就返回‘linux’#如果是Windows/Cyg ...

  10. 字符编码、python2和python3编码的区别

    目录 字符编码 文本编辑器存储信息的过程 python解释器解释python代码的流程 python解释器与文本编辑器的异同 不同编码格式存入与读取数据的过程 乱码的分析 python2和python ...