js动画效果代码方法

JavaScript020

js动画效果代码方法,第1张

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外,同时会动态的隐藏改变当前元素的高度,宽度和不透明度,最终切换当前元素的可见状态。如果元素可见,则切换隐藏状态,如元素隐藏,切换可见状态

2.fadeln()与fadeOut()

这两个方法,实现了淡入和淡出的一个动画效果,fadeln()渐显效果,fadeout()渐隐效果,两者结合使用,可把元素隐藏在按钮中,在通过点击事件显示,两方法只改变元素的透明度,不修改其他属性

3.fadeToggle()

此方法会动态的改变当前元素的透明度,最终却换当前元素的可见状态。如果元素是可见的,则通过淡出效果切换隐藏;如果元素是隐藏的,则通过淡入效果切换可见状态,不设置参数时,默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo()

fadeln()与fadeOut()方法都是渐隐渐显,透明度从1到0,从0到1实现一个渐隐渐显效果,而fadeToggle()方法则是可以控制1-0的透明度,为更好展示透明度的效果,可在页面中创造一个下拉框,用于保存透明度值,操作下拉框去控制图片透明度值

5.slideDown()与 slideUp()

slideDown()可改变元素高度,呈现一个滑动效果,由上往下滑动,直到显示最终的当前元素,slideUp()相反,由下往上滑动,直到隐藏最终的当前元素

6.slideToggle()

slideToggle()方法跟slideDown()与 slideUp() 两个方法有异曲同工之妙,同样可改变元素的高度,不同于slideDown()与 slideUp() 的效果, 这个方法是通过点击事情控制元素的隐藏和显示

7.animate()

这个方法是自定义动画效果的方法,高度,宽度,透明度,运行速度都是可通过自定义给属性,这个方法只能改变可以取数字值的css属性,如:大小,边框,内外边距,定位,字体,文本,背景,透明度。

8.stop()

停止动画,stop()方法能结束当前的动画,并立即进入到下一个动画。

1、在你的点击事件中加上一个判断,假设产生动画效果目标的是aa这个节点,那么你要加上这个判断

if(!$(aa).is(:animated)){

//执行你的操作

}

他会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感觉

2、$(aa).stop(true,false).animate({},1000)

这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画,会造成动画脱节不太美观,但是反应迅速

说到这里我们解释下stop()这个函数的用法。

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

stop在新版jQuery中添加了2个参数:

第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;

第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一般,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志,一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。

var flag = false

function aa(){

if(flag) return//这里指当这个标志flag为真的时候,直接返回,不执行当前的这个动画。

flag=true//这里是在执行这个动画的最开始的时候把标志flag设置为真,在这个动画没执行完之前这个值一直为真,当下次运行这个函数的时候,由于flag值为真,也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。

……………….

………………..

………………..

$(“aa”).animated({“left”:”100″},1000,function(){

………………….

flag=false//回到最初始状态,也是也表示这一轮动画执行完毕。

})

}

盒子 原来的位置 0+ 10 盒子现在的offsetLeft 10

|-5| = 5

这三个函数都是 数学函数

Math

比如说 console.log(Math.ceil(1.01)) 结果 是 2

console.log(Math.ceil(1.9))结果 2

console.log(Math.ceil(-1.3)) 结果 是 -1

比如说 console.log(Math.floor(1.01)) 结果 是 1

console.log(Math.floor(1.9)) 结果 1

console.log(Math.floor(-1.3)) 结果 是 -2

console.log(Math.round(1.01)) 结果 是 1

console.log(Math.round(1.9)) 结果 是 2

匀速动画的原理: 盒子本身的位置 + 步长

缓动动画的原理:盒子本身的位置 + 步长 (不断变化的)

( 缺陷:只能水平方向!随后的“封装运动框架单个属性会进一步改进” )

我们访问得到css 属性,比较常用的有两种:

点语法可以得到 width 属性 和 top属性 ** 带有单位的 。 100px

但是这个语法有非常大的 缺陷**, 不变的。

后面的width 和 top 没有办法传递参数的。

var w = width

box.style.w

最大的优点 : 可以给属性传递参数

我们想要获得css 的样式, box.style.left 和 box.style.backgorundColor

但是它只能得到 行内的样式。

但是我们工作最多用的是 内嵌式 或者 外链式 。

怎么办?

核心: 我们怎么才能得到内嵌或者外链的样式呢?

外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)

两个选项是必须的, 没有伪类 用 null 替代

我们这个元素里面的属性很多, left top width ===

我们想要某个属性, 就应该 返回该属性,所有继续封装 返回当前样式的 函数。

千万要记得 每个 的意思 : 那是相当重要

flag在js中一般作为开关,进行判断。

等动画执行完毕再去执行的函数 回调函数

我们怎么知道动画就执行完毕了呢?

很简单 当定时器停止了。 动画就结束了

案例源码:

in运算符也是一个二元运算符,但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个(左边的)操作数必须是字符串类型或可以转换为字符串类型的其他类型,而第2个(右边的)操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名,才会返回true,否则返回false

案例源码:

链接: http://pan.baidu.com/s/1miEvqoo

密码:7fv8