jQuery动画效果教程视频_动画使用攻略

jQuery animate() 方法用于创建自定义动画。语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称

jQuery动画效果教程视频

jQuery animate() 方法用于创建自定义动画。语法:

jQuery动画效果教程视频_动画使用攻略

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用;它把元素移动到左边,3秒时间到 left 属性等于 500 像素为止:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>  
       *{margin:0;padding:0;}
       #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                 $("#div2").animate({
                      left:'500px',
                      top:'150px',
                       opacity:'0.5',
                 },3000);
             });
           });
      </script>
</head>
<body>
     <button id="bt1">开始</button>
     <div id="div2">我是内容</div>
</body>
</html>

jQuery animate() – 使用队列功能,jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>队列动画</title>
    <style>  
       *{margin:0;padding:0;}
       #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                var div=$('#div2');
                     div.animate({height:'300px',opacity:'0.4'});
                     div.animate({width:'300px',opacity:'0.8'});
                     div.animate({height:'100px',opacity:'0.4'});
                     div.animate({width:'100px',opacity:'0.8'});
             })       
           });
      </script>
</head>
<body>
     <button id="bt1">开始</button>
     <div id="div2">我是内容</div>
</body>
</html>

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>停止动画</title>
    <style>
          
       *{margin:0;padding:0;}
         #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                 $("#div2").animate({
                      left:'500px',
                      top:'150px',
                      opacity:'0.5',
                 },3000);
             });
             $("#bt2").click(function(){
                  $("#div2").stop();
             })
           });
      </script>
</head>
<body>
     <button id="bt1">开始</button><button id="bt2">停止</button>
     <div id="div2">我是内容</div>
</body>
</html>

更多时候jQuery的动画会涉及函数,也就是会使用一个参数的作用,这也是jQuery动画受青睐的一个原因。例如:  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
          
       *{margin:0;padding:0;}
         #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                   $("#div2").hide(1000,function(){
                       alert("内容被隐藏了");
                   })
             }) 
           });
      </script>
</head>
<body>
     <button id="bt1">点击</button>
     <div id="div2">我是内容</div>
</body>
</html>

 

海计划公众号
(0)
上一篇 2020/03/29 01:43
下一篇 2020/03/29 01:43

您可能感兴趣的内容

  • CodeZen基础知识_在线源代码转图片工具

    CodeZen基础知识 官方网址:http://codezen.rishimohan.me/ 简介描述:在线源代码转图片工具 CodeZen是一个快把源代码生成一张JPG或PNG图…

    2020/03/11
  • 多阶Hash算法入门教程_Hash小白攻略

    在分布式系统中,会经常用到K-V存储,一般实现的方式有红黑树或者哈希表,在Redis中还用到了跳表。都是通过一个确定的Key值,来查找Key附带的Value属性。本文会介绍一种高效的算法——多阶Hash。1原理多阶Hash的实现原理很简单,每个Hash桶数组算作一阶,如果有20阶的多阶Hash,那么就是一个二维数组,第一维是Hash桶的编号,第二维是每个Ha

    2020/03/23
  • Node.js历史简介使用帮助_简介基础入门

    你可能不相信,Node.js才10岁。相比之下,JavaScript已有24年的历史,而我们一直使用的web,也有26年历史了。10年不是一段很长的时间,但是Node.js让人感觉已经存在了很久。在Node.js发布第二年的时候,我已经开始使用它了。虽然当时资料信息有限,但是仍然感受到了它的不凡潜力和应用前景。在这篇文章中,我会简单介绍一些Node.js发展

    2020/03/26
  • 浏览器获取手机经纬度位置指南攻略_定位基础教程

    经纬度位置无法获取的情况:1. 网址必须为域名,不能用ip直接访问,否则手机浏览器直接拒绝改请求。2. iphone的浏览器(包括微信扫码进入网站) ,亲测调用 http 的网站是不能获取到经纬度的,是苹果手机安全的考虑,如果使用https网站的话,证书也必须是有效证书(无效证书的时候浏览器访问会提示该网站不安全是否继续访问,即使“继续访问”也不能获取经纬度

    2020/03/24
  • vue-router之hash模式和history模式小白入门_Hash菜鸟教程

    当前版本: 3.0.3类目录: src/history/hash模式即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变

    2020/03/30
  • ES6 之 对象的简写方式小白攻略_对象小白知识

    简写有两条基本原则:同名的属性可以省略不写对象中的方法中的 : function 可以省略不写来看下下面这个例子,我分别用ES5 和 ES6 的语法分别定义并声明了一个简单的学生对象:ES5:var studentES5 = {name: ‘小方哥’,age: 20,sex: ‘男’,getName: function () {return this.nam

    2020/03/30
  • TypeScript字面量类型扩展和无类型导入菜鸟攻略_字面量菜鸟指南

    扩展字面量类型当使用 const 关键字声明局部变量并使用字面量值初始化它时,TypeScript 将推断该变量的字面量类型:const stringLiteral = “https”; // Type “https”
    const numericLiteral = 42; // Type 42
    const booleanLiteral = true;

    2020/03/23
  • Colorify.js菜鸟知识_可定制,Javascript 编写,小巧的取色器

    Colorify.js菜鸟知识 官方网址:http://colorify.rocks GitHub:https://github.com/LukyVj/Colorify.js 简介…

    2020/03/06
  • css之定位教程视频_布局教程视频

    定位是css当中一种操作html元素布局的方案属性positionstatic:默认值,无特殊定位,对象遵循HTML原则;absolute:绝对定位,将对象从文档流中完全拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据网页进行定位,而其层叠通过z-index属性定

    2020/03/26
  • clipber(快贴)菜鸟教程网_真正的云剪贴板工具

    clipber(快贴)菜鸟教程网 官方网址:http://clipber.com/ 简介描述:真正的云剪贴板工具 快贴(clipber)是一款可以帮助我们提高工作效率的云剪贴板工具…

    2020/03/11
  • Unicode字符集的由来菜鸟教程网_字符指南教程

    本文起源于行走在阳光下的那些不可见字符中的知识边界,因为涉及到字符相关,而我也不能很清楚的描述Unicode的前世今生,故而有了此文。计算机技术的革命极大地方便了人们的工作与生活,使得人类生活前进了一大步,可是在计算机发展进程中,世界各地由于语言文字不一,有过那么一段混乱难受的日子…字符世界的起源由于计算机在美国诞生,因此字符集最初也只考虑了美国人当时的

    2020/03/29
  • for in 和 for of的区别详解小白帮助_Array小白基础

    for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:例1 const obj = {a: 1,b: 2,c: 3}for (let i in obj) {console.log(i)// a// b// c}for (let i of obj) {console.log(i)// Uncaught T

    2020/04/03
  • waifu2x小白指南_在线将小图无损放大的工具

    waifu2x使用攻略 官方网址:http://waifu2x.udp.jp/ 简介描述:在线将小图无损放大的工具

    2020/03/06
  • js中setTimeout和setInterval的深入理解:它们之间的区别,原理,“异步“等小白常识_定时器基础入门

    setTimeout和setInterval的区别setTimeout在执行时,是在载入后延迟指定时间后,去执行一次表达式,而setInterval则不一样,它从载入后是每隔指定的时间就执行一次表达式。当然我们可以通过重复调用setTimeout的方法,实现类似于setInterval一样达到周而复始的效果,下面我们就实现用setTimeout来模拟setI

    2020/04/06
  • 解密HTTP/2与HTTP/3 的新特性小白攻略_特性基础指南

    前言HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。虽然 HTTP/2 提高了网页的性能,但是并不代表它已经是完美的了,HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。一、HTTP/1.1发明

    2020/03/23
  • 在 HTML 中包含资源的新思路使用帮助_资源指南教程

    注意:这篇文章描述了一种我们仍需要测其试性能影响的实验技术。 它可能最终会成为一种有用的工具,也有可能成为不被推荐的做法。 无论哪种方式,它对我们来说很有吸引力!只要我一直工作在 Web 上,就需要一种简单的 HTML 驱动方式,将另一个文件的内容直接包含在页面中。 例如,我经常希望向页面添加额外的 HTML,或者嵌入 SVG 文件的内容,以便我们可以为其设

    2020/03/24