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学习笔记（三）的更多相关文章

  1. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  2. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  3. 初步学习jquery学习笔记（一）

    什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...

  4. 初步学习jquery学习笔记（四）

    Jquery HTML Jquery 捕获内容 什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...

  5. 初步学习jquery学习笔记（二）

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

  6. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  7. jquery基础 笔记三

    一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...

  8. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

  9. jquery学习笔记(三)：事件和应用

    内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...

随机推荐

  1. JavaScript 输出的四种方法

    JavaScript 没有任何打印或者输出的函数. ㈠JavaScript 显示数据 ⑴使用 window.alert() 弹出警告框. ⑵使用 document.write() 方法将内容写到 HT ...

  2. python re.search方法

    re.search 扫描整个字符串并返回第一个成功的匹配. 函数语法: re.search(pattern, string, flags=0) 函数参数说明: 参数 描述 pattern 匹配的正则表 ...

  3. Confluence 6 插入一个文件到你的页面

    文件可以在页面中以缩略图或者链接的方式显示.我们有多种办法能够上传文件,请参考 Upload Files 页面. 你可以控制文件如何在你的页面中显示.文件在页面中显示的可用方法与你的文件类型有关. 插 ...

  4. sh_06_元组基本使用

    sh_06_元组基本使用 info_tuple = ("zhangsan", 18, 1.75, "zhangsan") # 1. 取值和取索引 print(i ...

  5. HDU 4725 The Shortest Path in Nya Graph （最短路 ）

    This is a very easy problem, your task is just calculate el camino mas corto en un grafico, and just ...

  6. JSP之Bean

    <jsp:useBean id=" " class" "/>创建JavaBean对象,并把创建的对象保存到域对象 比如:<jsp:useBea ...

  7. 构建基于Electron开发的软件遇到的问题

    构建pdman时,报了好些错. 主要还是网络问题和版本不一致导致的. 前提 npm设置淘宝源,自行搜索. 版本 上面是官方要求的node环境. 需要首先安装nvm, brew install nvm ...

  8. redis学习之路

    cp /home/zzq/桌面/M+.txt /home/zzq/mySercet#将桌面文件下的M+.txt 复制到mySercetrm -rf M+.txt#强制递归删除M+.txt1.网络适配器 ...

  9. [Java]将算术表达式（中序表达式Infix）转成后续表达式Postfix

    Inlet类: package com.hy; import java.io.BufferedReader; import java.io.IOException; import java.io.In ...

  10. Viola-Jones(人脸检测)

    Viola-Jones 人脸检测 1.Haar特征抽取 ‘ 2. Adaboost 算法