jQuery学习笔记三

jquery停止动画

stop函数的初步功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("#flip").click(function(){

                $("#panel").slideDown(8000);

            });

            $("#stop").click(function(){

                $("#panel").stop();

            });

        });

    </script>

    <style>

        #panel,#flip{

            text-align: center;

            padding: 5px;

            background-color:#e5eecc;

            border: solid 1px #803636;

        }

        #panel{

            padding: 50px;

            display: none;

        }

    </style>

</head>

<body>

    <button id="stop">

        点击我停止

    </button>

    <div id="flip">

        点我向下滑动面板

    </div>

    <div id="panel">

        面板

    </div>

</body>

</html>

现象:当调用stop()函数的时候动画会结束

stop函数的三种参数形式的功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("#start").click(function(){

                $("div").animate({left:"100px"},5000);

                $("div").animate({fontSize:"3em"},5000);

            })

            $("#stop").click(function(){

                $("div").stop();//停止当前的动画执行，队列后面的可以执行

            })

            $("#stop2").click(function(){

                $("div").stop(true);//停止所有的动画

            })

            $("#stop3").click(function(){//停止所有动画，但是会显示最后的结果

                $("div").stop(true,true);

            })

        })

    </script>

</head>

<body>

    <button id="start">开始</button>

    <button id="stop">停止</button>

    <button id="stop2">停止所有</button>

    <button id="stop3">停止动画，但完成动作</button>

    <p>点击 "开始" 按钮开始动画。</p>

    <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>

    <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>

    <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>

    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

总结

1.函数调用格式

$(selector).stop(stopToAll,goToAnd)

2.参数含义

stopAll决定是否清空动画的队列
goToEnd决定是否完成当前动画
参数的默认值都是false

jquery的callback()方法

jquery中很多的函数都具有speed和duration两个参数，除此之外还有一个callback的参数，其需要传进一个函数，这个函数会在动画结束之后来执行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("button").click(function(){

                $("p").hide("slow",function(){

                    alert("文字已经成功隐藏!");

                });

            });

        })

    </script>

</head>

<body>

    <button>隐藏</button>

    <p>文本的内容，点击隐藏按钮之后会消失</p>

</body>

</html>

没有回调

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide(1000);

    alert("现在段落被隐藏了");

  });

});

</script>

</head>

<body>

<button>隐藏</button>

<p>这是一个段落，内容很少</p>

</body>

</html>

总结:

callback函数作为动画函数的一个参数，在动画执行完了之后会被调用。
假如调用的内容不写在回调函数里面，会不执行动画，而执行调用内容

jquery 链

通过jquery可以将动画/方法链接在一起。chaining允许我们在一条语句中运行多个jquery方法，且这些方法作用于相同的元素。

之前写jquery语句都是一条接着一条，不过通过链接的技术，允许我们在相同的元素上运行多条jquery命令,一条接着一条的执行。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("button").click(function(){

                $("p").css("color","red").slideUp(2000).slideDown(2000);//顺序执行

            })

        })

    </script>

</head>

<body>

    <p id="p1">文字</p>

    <button>点我</button>

</body>

</html>

总结

1.使用链的好处是不需要多次查找相同的元素

2.方法按照写的方法顺序执行

初步学习jquery学习笔记（三）的更多相关文章

初步学习jquery学习笔记（六）
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
初步学习jquery学习笔记（五）
jquery学习笔记五 jquery遍历什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止标签树 <div> <ul> <li> <sp ...
初步学习jquery学习笔记（一）
什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...
初步学习jquery学习笔记（四）
Jquery HTML Jquery 捕获内容什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...
初步学习jquery学习笔记（二）
jQuery事件 jquery是为事件处理而设计的什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法实例: 在元素上移动鼠标选取单选按钮点击元 ...
Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染
Class与style绑定.条件渲染和列表渲染目标: 熟练使用class与style绑定的多种方式熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...
jquery基础笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
jquery学习笔记(三)：事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...

随机推荐

java web文件上传功能实现
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
51 Nod 1486 大大走格子
1486 大大走格子题目来源: CodeForces 基准时间限制:1 秒空间限制:131072 KB 分值: 160 难度:6级算法题收藏关注有一个h行w列的棋盘,里面有一些格子是不 ...
[CSP-S模拟测试]:表格（动态开点二维线段树+离散化）
题目传送门(内部题112) 输入格式一个数$N$,表示矩形的个数. 接下来$N$行,每行四个整数$X_a,Y_a,X_b,Y_b$.分别表示每个矩形左下角和右上角的坐标. 保证$(X_a<X_ ...
ajax报告申请添加
function reportApplyAddFun(){ $("#dlg").dialog("open").dialog("center" ...
SpringMVC——-Controller返回格式化数据如JSON、XML的配置方式和机制
1.本文内容我们在Web项目开发过程中,一般来说访问一个处理器,然后会返回一个视图,或者跳转到另外的处理器.但是随着项目越来越复杂,需求越来越复杂,对于处理器返回数据的类型要求也越来越多.比如要求能 ...
golang开发问题
开发问题: How to find out which types implement which interface in Golang? How do you quickly find the i ...
git提交到分支
git checkout grego@gregoo:mygo$ git checkout origin/test Note: checking out 'origin/test'. You are i ...
Solr之java实现增删查操作
1.添加pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...
子系统安装vsftpd
1.安装命令 sudo apt install vsftpd 2.为FTP添加用户,使用sudo useradd -m sunftp命令添加一个sunftp的用户 3. 授权文件夹 chmod 77 ...
分期花呗账户交易通知：尾号6932客户，您的申请已通过，账户余额38139元，无手续费，点t.cn/Aijsx9vq取款，回T退订。
10692285499 分期花呗账户变动通知:尾号6932客户,您的申请已通过,账户余额5000元,请及时点击t.cn/AiOMsNAm取款,回T退订. 106935276259002分期花呗账户 ...

初步学习jquery学习笔记（三）