一、显示与隐藏动画效果

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. 【良心保姆级教程】java手把手教你用swing写一个学生的增删改查模块

    很多刚入门的同学,不清楚如何用java.swing去开发出一个系统? 不清楚如何使用java代码去操作数据库进行增删改查一些列操作,不清楚java代码和数据库(mysql.sqlserver)之间怎么 ...

  2. Python - typing 模块 —— Union

    前言 typing 是在 python 3.5 才有的模块 前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p/15145380.html 常用类型提示 ...

  3. shell脚本中select循环语句用法

    shell脚本中select循环语句 1. 脚本中select的语法格式 select VAR in LIST do command1 command2 ... ... commandN done s ...

  4. leetcode数组典型题目小结

    数组与矩阵 数组与矩阵的基本知识: 1.数组:数组是在程序设计中,为了处理方便, 把具有相同类型的若干元素按有序的形式组织起来的一种形式. 首先,数组会利用索引来记录每个元素在数组中的位置,且在大多数 ...

  5. python 直接插入排序

    # 先将未排序的元素放到九天之上,一个临时变量temp,上到九天之上去观察前面已经排好的序列, # 然后从后向前对比,只要临时变量小于某个位置的值,就将其向前移动一位,就是给比它下标大 # 1的位置处 ...

  6. scrum项目冲刺_day05总结

    摘要:今日完成任务. 1.语音识别完成 2.搜索功能实现了从数据库中的查询 总任务: 一.appUI页面(已完成) 二.首页功能: 1.图像识别功能(已完成) 2.语音识别功能(已完成) 3.垃圾搜索 ...

  7. 解决sofaboot项目右键入口方法没有run sofa application

    选中入口方法名,右键出现run sofa application

  8. 合并区间 leetcode

    描述: 给出一组区间,请合并所有重叠的区间. 请保证合并后的区间按区间起点升序排列. 输入: [[10,30],[20,60],[80,100],[150,180]] 输出: [[10,60],[80 ...

  9. Spring Cloud Gateway 没有链路信息,我 TM 人傻了(上)

    本系列是 我TM人傻了 系列第五期[捂脸],往期精彩回顾: 升级到Spring 5.3.x之后,GC次数急剧增加,我TM人傻了 这个大表走索引字段查询的 SQL 怎么就成全扫描了,我TM人傻了 获取异 ...

  10. SpringSecurity系列学习(一):初识SpringSecurity

    SpringSecurity Spring Security是spring采用AOP思想,基于servlet过滤器实现的安全框架.它提供了完善的认证机制和方法级的 授权功能.是一款非常优秀的权限管理框 ...