jQuery中常用动画效果函数(日常整理)
jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数。
jQuery的效果函数列表:
animate():对被选元素应用“自定义”的动画。
clearQueue():对被选元素移除所有排队的函数(仍未运行的)。
delay():对被选元素的所有排队函数(仍未运行)设置延迟。
dequeue():运行被选元素的下一个排队函数。
fadeln():逐渐改变被选元素的不透明度,从隐藏到可见。
fadeOut():逐渐改变被元素的不透明度,从可见到隐藏。
fadeTo():把被选元素逐渐改变至给定的不透明度。
hide():隐藏被选的元素。
queue():显示被选元素的排队函数。
show():显示被选的元素。
slideDown():通过调整高度来滑动显示被选元素。
slideToggle():对被选元素进行滑动隐藏和滑动显示的切换。
slideUp():通过调整高度来滑动隐藏被选元素。
stop():停止在被选元素上运行的动画。
toggle():对被选元素进行隐藏和显示的切换。
animate():
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 ""> clearQueue():
clearQueue() 方法停止队列中所有仍未执行的函数。
与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队的函数(通过 .queue() 方法添加到通用 jQuery 队列的任何函数)。
delay():
delay():对被选元素的所有排队函数(仍未运行)设置延迟。
dequeue():
dequeue():运行被选元素的下一个排队函数。
fadeIn():
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
fadeOut():
fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
fadeTo():
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
hide():
如果被选的元素已被显示,则隐藏该元素。
queue():
queue():显示被选元素的排队函数。
show():
如果被选元素已被隐藏,则显示这些元素。
slideDown():
slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
slideToggle() :
slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
slideUp():
通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
stop():
stop() 方法停止当前正在运行的动画。
toggle():
toggle() 方法切换元素的可见状态。
以上所述是小编给大家介绍的jQuery中常用动画效果函数(日常整理),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的。
相关推荐
-
原生js实现jquery函数animate()动画效果的简单实例
通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参
-
jQuery自定义动画函数实例详解(附demo源码)
本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d
-
分享一些常用的jQuery动画事件和动画函数
部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); .slideUp(); .slideToggle(); .text('string'); .animate({ a:'40px', b:'ccc' },200) .fa
-
jQuery的animate函数实现图文切换动画效果
在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <
-
用js模拟JQuery的show与hide动画函数代码
复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute
-
利用jQuery的动画函数animate实现豌豆发射效果
先来看看效果图 豌豆射手,草坪还有子弹都是现成的图片, 1. jQuery是库还是框架? jQuery可以说是现在最流行的一个js类库,而非框架. 之前在知乎上看到有人说了这样一句话: You call library. Framework calls you. 我深以为然,字面意思大概就是你可以无约束地使用类库,却需要在各种限制条件下使用一个框架. 我私以为,js 库指的是直接和document文档元素交互的一个API,你可以直接引用库,让它为你服务.而框架是偏向于架构的层次,你如果想要使用框
-
jQuery中常用动画效果函数(日常整理)
jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数. jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo(
-
jQuery中常用动画效果函数知识点整理
jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo():把被选元素逐渐改变至给定的不透明度. hide():隐藏被选的元素. que
-
jQuery中常用的遍历函数用法实例总结
本文实例总结了jQuery中常用的遍历函数用法.分享给大家供大家参考.具体如下: 1. children()函数 children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回. 你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素. 用法示例如下: // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.
-
jQuery中实现动画效果的基本操作介绍
动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数,speed. fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度 滑动显示 slideDown(): slideUp(): slideToggle(): 都可以传入一个speed参数. $(':animated');获取正在执行动画的元素. 将正在执行动画的元素停止: $(':animat
-
再JavaScript的jQuery库中编写动画效果的指南
jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","none") 在hide(time)与show(time)中填入事件,可以慢慢消失跟显现.可以修改元素的多个样式,高度,宽度,不透明度. 另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会.
-
jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},speed,callback); params:必须 定义形成动画的CSS属性 speed:可选 规定效果的时常:slow,fast或毫秒 callback:可选 动画完成后所执行的函数名称. jQuery animate()--操作多个属性 默认情况下,所有HTML元素的位置都是静态的,并且无法移动,
-
jQuery实现连续动画效果实例分析
本文实例讲述了jQuery实现连续动画效果的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery实现一连串的连续动画效果,将这些动画运用先设置好,然后在jQuery的作用下完成一个接一个的动画,这在网页游戏编写中是个基础但重要的动画生成技巧,对于前台设计来说也是有必要掌握的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/ 具体代码如下: <!DOCTYPE html PUBLI
-
jQuery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.
-
js实现类似jquery里animate动画效果的方法
本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio
-
jQuery实现带有动画效果的回到顶部和底部代码
本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C
随机推荐
- ionic选择多张图片上传的示例代码
- javascript 正则表达式分组、断言详解
- Oracle 数据库特殊查询总结
- 由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密 原创第1/3页
- javascript跨域总结之window.name实现的跨域数据传输
- Mysql数据库中把varchar类型转化为int类型的方法
- Android应用程序保持后台唤醒(使用WakeLock实现)
- 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
- ES6数组的扩展详解
- ajax完美解决的下拉框的onchange问题
- 解决列高度自适应(相同)的五种方法
- Spring自动扫描无法扫描jar包中bean的解决方法
- 微信开发之获取JSAPI TICKET
- 一天一个shell命令 linux文件内容操作系列-cat命令详解
- jQuery源码解读之extend()与工具方法、实例方法详解
- javascript实现下雪效果【实例代码】
- 刷新时清空文本框内容的js代码
- iscroll实现下拉刷新功能
- 绝对&相对URL对网站排名的影响的分析
- Windows服务器安装PHP MongoDB扩展的方法