javascript-jquery对象的动画处理
一、显示与隐藏动画效果
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对象的动画处理的更多相关文章
- JavaScript jQuery 事件、动画、扩展
事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- javascript --- jQuery --- Deferred对象
javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...
- jquery对象和javascript对象相互转换
本文转载:http://jeiofw.blog.51cto.com/3319919/786506 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuer ...
- JavaScript DOM对象和JQuery对象相互转换
1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- javascript 第26节 jQuery对象
<html> <head> <title>jQuery</title> <!--导入jquery库--> <script type=& ...
- javascript DOM对象转jquery对象
首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 【JQuery】jquery对象和javascript对象即DOM对象相互转换
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...
随机推荐
- Linux内核下包过滤框架——iptables&netfilter
iptables & netfilter 1.简介 netfilter/iptables(下文中简称为iptables)组成Linux内核下的包过滤防火墙,完成封包过滤.封包重定向和网络地址转 ...
- go语言游戏服务端开发(二)——网络通信
一.网络层 网络游戏客户端除了全局登录使用http请求外,一般通过socket长连接与服务端保持连接.go语言的net包提供网络socket长连接相关操作. 对于服务端,一般经历 Listen.Acc ...
- C# 获得当前方法 和 方法调用链 的 方法
一个获得方法名的方法,depth表示调用此方法的回溯深度. 比如,A方法调用B方法,B方法调用GetCurrentMethodFullName(2),那么得到的结果是A方法的全名(namespace+ ...
- 5-21python数据类型
一.字符串,是不可变数据类型,所有字符串的方法都不会修改字符串的值,使用字符串的方法后都是生成了一个新的字符串.就因为字符串是不可变变量! 字符串的方法 1. strip(),默认去空格,但是当()中 ...
- Vue3的新特性及相关的Composition API使用
首先 创建项目 Vue3 Vue3 相较于Vue2 的6大亮点: 1 性能快. 2 按需编译 体积更小 3 提供了组合API 类似于react 的React Hooks 4 更好的Ts支持 5 暴露了 ...
- Docker入门系列之一:什么是Docker?
原文作者:Jeff Hale 原文地址:https://towardsdatascience.com/learn-enough-docker-to-be-useful-b7ba70caeb4b 翻译: ...
- Shell系列(18)- 什么是正则表达式
概念: 正则表达式是用于描述字符排列和匹配模式的一种语法 它主要用于字符串的模式分割.匹配.查找及替换操作.
- 链式调用+对象属性与遍历+this指向+caller/callee
之前的作业: 提示: 在开发的时候尽量在函数内部将作用都给调用好,在外部就能够直接使用 链式调用: 正常这样是不行的,因为没有具体返回值: return 具体的对象,这样的才是链式操作,jquery ...
- css 圆形脉冲动画
需求: 项目需要在3D场景增加动画按钮,直接添加到场景时 当场景过大的时候 .加载比较麻烦 因在找资料时发现这玩意居然要付费.故做此记录, 效果: 参考: 1.https://www.jiangwei ...
- 面试必问:Java 垃圾回收机制
摘要:垃圾回收机制是守护线程的最佳示例,因为它始终在后台运行. 本文分享自华为云社区<一文带你了解Java 中的垃圾回收机制>,作者:海拥. 介绍 在 C/C++ 中,程序员负责对象的创建 ...