一、显示与隐藏动画效果

1.hide(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  $("p").hide(5000,"swing",function(){语句体});

2.show(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  $("p").show(5000,"swing",function(){语句体});

3.toggle(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);切换当前的显示/隐藏状态。

  $("p").toggle("slow");

二、淡入与淡出动画效果

fadeOut(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  方法:改变当前元素的不透明度,最终显示当前元素。

  $("p").fadeOut("slow");

2.fadeIn(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  方法:改变当前元素的不透明度,最终隐藏当前元素。

  $("p").fadeIn("slow");

3.fadeToggle(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  方法:切换当前元素的不透明度

  $("p").fadeoggle("slow");

4.fadeTo()方法:把当前元素调整到指定不透明度

  $("p").fadeTo("slow",0.5);

三、划入与划出效果

1.slideUp(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  方法:动态改变当前元素的高度,最终隐藏当前元素,此时display:none;

  $("p").slideUp("slow");p元素0.6秒内发生划出。

2.slideDown(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  方法:改变当前元素的高度,最终显示当前元素。

  $("p").slideDown("slow");//p元素0.6秒内发生划入

3.slideToggle(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

  方法:切换当前元素的高度。

  $("p").slideToggle();0.4秒内切换

四、自定义动画效果

1.animate():方法改变当前元素的个中css属性。

  语法:animate({需要改变的属性:值},动画持续时间,easing用来切换效果,动画执行效果完毕调用函数);

  $("p").animate({"width":"200px"},narmal);

  $("p").anmiate({"left":"+=300px"});

2.延迟动画队列

  语法:delay(动画时间);可以是slow、normal、fast

  $("p").delay(1000).animate({"left":"300px"}).animate({"height":"100px"});//

    -延迟1秒后,p元素在0.4秒内向右使得CSS属性left值为300px。然后p元素在0.4秒内放大高度为100px。

3.中止动画队列

  语法:stop(是否要清空未执行完的动画队列,是否直接将正在执行的动画跳转到末状态);两个参数的默认值均是false;

javascript-jquery对象的动画处理的更多相关文章

  1. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  2. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  3. javascript --- jQuery --- Deferred对象

    javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...

  4. jquery对象和javascript对象相互转换

    本文转载:http://jeiofw.blog.51cto.com/3319919/786506 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuer ...

  5. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. javascript 第26节 jQuery对象

    <html> <head> <title>jQuery</title> <!--导入jquery库--> <script type=& ...

  7. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  8. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  9. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  10. 【JQuery】jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...

随机推荐

  1. 紫色飞猪的研发之旅--06go自定义状态码

    在实际开发中,需要前后端需要协商状态码,状态码用于后端返前端时使用.在一个团队中,定义的状态码讲道理应该是一致的,项目开始的起始阶段状态码应该是定义了个七七八八的,随着功能的叠加而不断增加.此系列将围 ...

  2. golang sqlx

    在项目中我们通常可能会使用database/sql连接MySQL数据库.本文借助使用sqlx实现批量插入数据的例子,介绍了sqlx中可能被你忽视了的sqlx.In和DB.NamedExec方法. sq ...

  3. Redis详解(一)——

    Redis详解1 https://www.cnblogs.com/MoYu-zc/p/14985250.html https://www.cnblogs.com/xiaoxiaotank/p/1498 ...

  4. 20210807 Smooth,Six,Walker

    考场 开题,感觉 T1 很像 dky 讲过的一道中北大学 ACM 题,T3 一看就是随机化,具体不知道怎么做. T1 sb 题,直接取当前最小的光滑数,把它乘一个质因子放入候选集.类似<蚯蚓&g ...

  5. java版gRPC实战之一:用proto生成代码

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  6. JS019. 原生JS使用new Blob()实现带格式导出Word、Excel(提供无编程基础将页面上表格导出到本地的方法)

    导出效果 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. MySQL实战45讲(06--10)-笔记

    目录 06 | 全局锁和表锁 :给表加个字段怎么有这么多阻碍? 全局锁 表级锁 小结 07 | 行锁功过:怎么减少行锁对性能的影响? 死锁和死锁检测 08 | 事务到底是隔离的还是不隔离的? &quo ...

  8. 358 day09字节流、字符流

    day09[字节流.字符流] 主要内容 IO流 字节流 字符流 异常处理 Properties 教学目标 [ ] 能够说出IO流的分类和功能 [ ] 能够使用字节输出流写出数据到文件 [ ] 能够使用 ...

  9. 学习PHP中的信息格式化操作

    在国际化组件的学习过程中,我们已经接触过了 NumberFormatter 这种数字的格式化操作,它可以让我们将数字转换成标准格式.货币.本地语言等形式.今天我们来学习的是另一种专门用于信息格式化的类 ...

  10. PHP的内置WEB服务器

    在很多时候,我们需要简单的运行一个小 demo 来验证一些代码或者轮子是否可用,是否可以运行起来,但是去配 nginx 或者 apache 都很麻烦,其实,PHP CLI 已经提供了一个简单的测试服务 ...