js 动画效果总结

animate()
通过样式把一个状态改变成另外一个状态
如:$(selector).animate(styles,speed,easing,callback);
styles的参数可以有很多如:backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent

speed可以是毫秒(1000)"slow" "normal" "fast"
easing的值也是可选的如:swing linear

$(selector).animate({top:"50px"});

fadeIn() 淡入效果来隐藏被选中的元素
fadeOut() 淡出效果来隐藏被选中的元素
$(selector).fadeIn/fadeOut(speed ,callback)
speed的值可以为毫秒(1000)
"slow" "normal" "fast"

hide()/show() 隐藏/显示被隐藏的元素

slideUp()通过滑动效果,隐藏被选元素
slideDown()通过滑动效果,显示隐藏的被选元素
$(selector).slideDown(speed,callback)
speed的值可以为毫秒(1000)
"slow" "normal" "fast"

slideToggle()通过滑动效果来显示隐藏元素(如果元素是隐藏的则显示,乳沟显示则隐藏这些元素)

时间: 2024-11-05 12:30:24

js 动画效果总结的相关文章

Tween.js 动画效果

一.apply,和call的用法. 先来一个与本次博文无关的东西,就是apply和call的用法.其实apply和call的用法都一样,只是他们的传参不一样.apply是数组,而call是单独的传,类似枚举. 1.列子一把arguments转化为标准数组,可以使用push等方法. function test(){ //arguments.push(5); //arguments.push is not a function console.log(arguments) var arg = Arr

原生js动画效果(源码解析)

在做页面中,多数情况下都会遇到页面上做动画效果,之前一直都是用jquery,一直没有试过用原生的js来做,今天正好看到一篇js原生动画的效果,特记录在此, 原文地址:http://www.it165.net/pro/html/201410/23513.html 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 01.<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www

js动画效果

js能够按照预定的时间间隔重复调用一个函数,而这意味着我们可以随着时间的推移而不断改变某个元素的样式.动画是样式随时间变化的完美例子之一. js函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行.这个函数带有两个参数:第一个参数通常是一个字符串,其内容是将要执行的那个函数的名字:第二个参数是一个数值,它以毫秒为单位设定了需要经过多长时间才开始执行第一个参数所给出的函数: setTimeout("function",interval) 在绝大多数时候,把这个函数调动

JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)

moveElement函数 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用定时器实现JS动画效果</title> <style> </style> </head> <body> <

动画效果之运动

今天开始学习<JS动画效果>,上午把整个课程了解了一遍,决定动手做做实践.一上手就发现看似简单的问题却总是报错,几经推敲才发现问题所在. 关于匀速运动: 首先,做一个简单的“分享到”匀速运动,即当鼠标移到“块”上时,隐藏的块匀速被拉出,移走鼠标,块匀速隐藏. 1.这里涉及到定时器的问题.在开启一个定时器之前一定要关掉定时器,以免出现鼠标不停划上去的时候不停的开启定时器: 2.鼠标进入与离开事件可用一个函数表示,传入不同参数即可通用一个函数(注意尽量少的参数,所以可以精简): 3.offset对

tween.js的动画效果

实现动画可以用好多种的方法,今天来看看用tween.js插件是如何实现动画效果的.  tween.js的使用 1.下载 2.引入 3.使用tween.js语法 需要哪些条件来做运动 1.初始位置 2.目标点 缓动函数 1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic 三次方缓动效果 4.Quart 四次方缓动效果 5.Quint 五次方缓动效果 6.Sine  正弦缓动效果 7.Expo  指数缓动效果 8.Circ  圆形缓动函数 9.Elastic 指数衰减正弦曲线缓动函

JavaScript之JS实现动画效果

在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能为力的.如果我们想随着时间的变化而不断改变某个元素的样式,则只能用JavaScript.JavaScript能够按照预定的时间间隔重复的调用一个函数,而意味着我们可以随着时间的推移而不断改变某个元素的样式. 动画是样式随着时间变化的完美例子之一.简单的说,动画就是让元素的位置随着时间而不断的发生变化

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文

jquery使用CSS3实现文字动画效果插件Textillate.js

Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字. Textillate 下载        案例演示 使用方法 引入核心文件 <link href="assets/animate.css" rel="stylesheet"> <script src="http:/