首页 > 作文

jQuery中的动画效果介绍

更新时间:2023-04-03 10:11:22 阅读: 评论:0

jQuery中的动画效果

show() 显示 display:block/inline-block;

hide() 隐藏 display:none;

实现原理:在元素内部将display的属性改变

可以在()里面传递参数

数字 设置消失的时间消失时是渐变消失的

参数slow(200毫秒) normal(400毫秒) fast(600毫秒)

写错或是不写值时 默认值是normal

可以传递回调函数 可以实现列队动画

列队动画:一个动画执行完毕再执行下一个动画

实现列队动画的方法

可以通过eq()获得元素 通过将元素一层一层嵌套实现(已经很少使用)

代码如下:

CSS代码

.test{

padding:5px;

margin:5px;

background:pink;

float:left;

display:none;

}

HTML代码

<p class=”test”>L</p>

<p class=”test”>I</p>

<p class=”test”>K</p>

<p class=”test”>E</p>

<input type=”button” value=”show” class=”show” />

<input type=”button” value=”hide” class=”hide”/>

jQuery代码

$(function(){

$(‘.show’).click(function(){

$(‘.test’).eq(0).show(‘slow’,function(){

$(‘.test’).eq(1).show(‘slow’,function(){

$(‘.test’).eq(2).show(‘slow’,function(){

$(̵患寡而患不均什么意思6;.test’).eq(3).show(‘slow’);

});软件就业

});

});

});

});

可以通过回调函数实现异步动画

$(function(){

$(‘.show’).click(function(){

$(‘.test’).first().show(‘slow’,function Sh(){

$(this).next().show(‘slow’,Sh);

});

});

});

动画效果逐个显示用first(),next()加回调函数

动画效果逐个隐藏用last(),prev()加回调函数

toggle() 此函数可以实现点击切换的功能

实现点击隐藏和显示之间的切换功能

内部也可以传递slow、fast、normal的参数

slideUp 向上卷动

slideDown 向下卷动

slideToggle 可以实现切换 内部有自动的判断功能

fadeOut 淡出的动画效果

fadeIn 淡入的动画效果

fadeTogge 淡入淡出的切换 内部含有自动的判断功能

fadeTo 淡入淡出到 参数是小数如0.33

animate

自定义动画 可以实现多重同步动画

通过键值对的方式给元素添加多个动画

内部可以传递速度参数(fast、slow、normal)

以及回调函数(动画执行完成后执行)

可以实现元素的位移动画元素要设置position:absolute;

指定元素移动到指定的位置

可以通过’+=’、’-=’的方式实现累加 累减的功能

可以通过回调函数的嵌套实现列队动画

可以实现多个元素之间的列队动画 (但是效率很低 会干扰其它动画)

内部含有两种运动状态 swing 缓慢运动 linear 匀速运动 默认值为swing

代码如下:

$(function(){

$(‘input’).click(function(){

$(‘p’).animate({

height:’200px’

},function(){

$(‘p’).animate({

width:’300px’

},function(){

$(‘p’).animate({

opacity:0.5

});

});

});

});

});

在同一个元素的基础上 可以通过连缀或者顺序排列的方法实现列队动画 (不能实现多个元素之间的列队动画)

代码如下:

$(‘input’).click(function(){

$(‘p’).animate({width:’200px’})

.animate({height:’300px’})

.animate({opacity:0.5})

});

queue()

此方法可以实现多个元素的列队动画不会对其它的动画进行干扰 每个动画各自执行

queue() 此动画后面再执行其它的动画时 需要在次动画内部传入一个next 在动画内部进行调用 才可以使此动画后面的动画进行执行(1.4版本之后出现的方法) 不进行传参 在queue方法内部添加$(this).dequeue();(1.4版本之前使用的方法)也同样可以实现此效果

代码如下:

$(‘input’).click(function(){

$(‘#box’).slideUp(‘slow’)

.slideDown(‘slow’)

.queue(function(next){

$(this).css(‘background’,’yellow’);

next();

})

.hide(‘slow’);

});

还可以获得列队动画的长度 需要传入fx 使用count()获得列队动画的长度 (但是一般很少使用)

clearQueue() 可以实现对列队动画的清除

stop() 可以实现动画的停止

只有一个动画时 执行stop() 会将这个动画停止

有多个列队动画时 执行stop() 会停止当前的动画 继续执行下一个列队动画

内部有两个参数 第一个参数表示是否停止掉后面的所有动画内容 参数值为true时会将列队动画后面的所有动画都停止 默认值为fal

第二个参数参数值为true时表示停止时 立刻跳到当前动画的最后的位置 默认值是fal

delay() 时间延迟的方法 内部的参数为数值 表示

延迟的时间 单位是毫秒

arguments.callee 获取当前调用函数的本体

:animated 过滤器 可以通过次过滤器实现对运动的

动画的查找 改变它的一些属性

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta chart=”utf-8″>

<title>DOM操作</title>

<script type=”text/javascript” src=”jquery.js”></script>

<style>

#box{

height:100px; width:100px;background:red;

position:absolute; top:50px; left:0;

}

#pox{

height:100px;width:民营企业的发展100px;background:yellow;

position:absolute; top:200px; left:0;

}

</style>

</head>

<body>

<input type=”button” value=”查找” id=”cha” />

<p id=&冬姑娘#8221;box”>box</p>

<p id=”pox”>pox</p>

<script>

$(function(){

$(“#box”).slideToggle(‘slow’,function(){

$(this).slideToggle(‘slow’,arguments.callee)

});

$(“#cha”).click(function(){

$(‘:animated’).css(‘background’,’blue’)思念的短信;

});

});

</script>

</body>

</html>

动画的全局属性

$.fx.interval = 数值; 改变所有动画的运行速度

$.fx.off = true; 关闭页面中的所有动画

本文发布于:2023-04-03 10:11:21,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2bea47314bfd10551994d5a7403f16dd.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:jQuery中的动画效果介绍.doc

本文 PDF 下载地址:jQuery中的动画效果介绍.pdf

标签:动画   可以实现   元素   参数
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图