jQuery中的简单动画

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载

hide(time)将元素的display变为none,可以设置时间,让其缓慢的变化

show(time)将元素的display变为block,可以设置时间,让其缓慢的变化

fadeln(),fadeOut()

只改变元素透明度,out会在指定的一段时间内降低元素的不透明度,直到完全消失,in则相反

slideDown(),slideUp()

只改变元素的高度,如果一个元素的display为none,调用down时元素将由上至下延伸显示,up则相反

toggle():切换元素的可见状态,如果是可见,则切换为隐藏,如果原始是隐藏,则切换为可见

slideToggle():通过高度变化来切换匹配元素的可见性

fadeToggle通过透明度来切换元素的可见性,淡入淡出的效果

fadeTo(speed,opacity,[fn]):切换元素的透明度 。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

opacity:一个0至1之间表示透明度的数字。

fn:在动画完成时执行的函数,每个元素执行一次。

$('.content').fadeTo("slow",0.5,function(){});

自定义动画:

animate(params,[speed],[easing],[fn])//创建自定义动画 
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。

停止动画:

stop([clearQueue],[jumpToEnd])//停止所有在指定元素上正在运行的动画。
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

延迟动画:

delay(duration,[queueName)
queueName:队列名词,默认是Fx,动画队列。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

DOM的事件模拟

只有根据DOM2级事件实现这些事件的浏览器才返回true,以非标准方式支持这些事件的浏览器会返回false;

1351
来自专栏HTML5学堂

点击块,让小块动起来 - 函数封装

上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式,它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式,可以回复“标...

32012
来自专栏前端杂货铺

mouseenter以及mouseleave兼容性

在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用 mouseente...

3927
来自专栏杨逸轩 ' sBlog

元旦快乐 – 使用snow.js增加下雪效果

3534
来自专栏老马寒门IT

05-老马jQuery教程-动画

前言 jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实...

1925
来自专栏柠檬先生

VUE 入门基础(8)

十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

2219
来自专栏Jacklin攻城狮

[UIVIew]谈谈对drawRect的理解

2332
来自专栏绿巨人专栏

在博客园的markdow编辑器中使用SVG

3674
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1092
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

1.什么是jQuery? 1.1 jQuery介绍 jQuery是一个轻型、快速的、小巧的功能丰富的JavaScript类库。本质就是一堆js的函数的组合。对原...

22510

扫码关注云+社区

领取腾讯云代金券