1.基本效果
匹配元素从左上角开始变浓变大或缩小到左上角变淡变小
①隐藏元素
除了可以设置匹配元素的display:none外,可以用以下函数
hide(speed,[callback]) 返回值:jQuery 参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number callback:在完成动画时执行的函数,每个匹配元素执行一次
slow=600毫秒 normal=400毫秒 fast=200毫秒
以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。
②显示元素
show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。
③交替显示隐藏
toggle(speed,[callback]) 以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。
<input type="button" id="hide1" value="hide()" />
<input type="button" id="show1" value="show()" />
<input type="button" id="toggle1" value="toggle()" />
<div id="1" style="width:100px; height:100px; background-color:Green;"></div>
$(function(){
$("#hide1").click(function(){$("#1").hide(700)});
$("#show1").click(function(){$("#1").show(700)});
$("#toggle1").click(function(){$("#1").toggle(700)});
})
2.滑动效果
①向上收缩效果
slideUp(speed,[callback]) 通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。
②向下展开效果
slideDown(speed,[callback]) 通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。
③交替伸缩效果
slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。
$("#slideup1").click(function(){$("#1").slideUp(700)});
$("#slidedown2").click(function(){$("#1").slideDown(700)});
$("#slidetoggle").click(function(){$("#1").slideToggle(700)});
3.淡入淡出效果
通过控制匹配元素的不透明度来实现元素的显示与隐藏
①淡入效果
fadeIn(speed,[callback]) 通过不透明度的变化逐渐将匹配元素显现出来
$("#fadein").click(function(){$("#1").fadeIn("slow")});
②淡出效果
fadeOut(speed,[callback]) 通过不透明度的变化逐渐将匹配元素隐藏起来
③自定义不透明度
淡入或淡出的最终结果为自定义的透明度
fadeTo(speed,opacity,[callback]) opacity的值域是0~1之间
4.自定义动画效果
①自定义动画
animate(params,duration,[easing],[callback]) 返回值:jQuery 参数-params:一个包含类似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,如:{height:"100%",width:"70%",fontSize:"4em",color:"white"}但这些样式属性的名字与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是font-size duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到最终结束变化的时长,其值的设置也一样String,Number easing:这个不太明白,要使用的擦除效果的名称(需要插件支持),默认jQuery提供linear和swing|String callback:和前面一样
这个函数可不像看上去那么简单,有几点需注意1.既然该函数是将匹配元素从原来样子变化成函数中params参数中设置的样子,那么就必须有原来的样子,即params中设置的样式属性必须在原来的样子中有设置过,不能本来没有设置border,却在params中这样设置{borderStyle:"solid",borderWidth:"1px"} 2.就是前面提到过的样式属性的骆驼命名法 3.有些样式属性animate是不支持的,即便你在原来的样子里有设置过,比如background-color,在params中不能想当然的就设置了backgroundColor样式属性。 http://www.stylejar.com/tag/jquery
<div id="3" style="width:200px; height:300px; border:solid 1px; position:absolute; left:-180px;">
用户名:<input type="text" /><br />
密码:<input type="password" /></div>
$(function(){
$("#3").mouseover(function(){$(this).stop().animate({left:"0px"})
}).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)})
})
http://blog.sina.com.cn/s/blog_6168f0090100el4p.html
以上实现了我们经常在网页上见的滑动框的效果,一开始框在浏览器左侧露出20px,当鼠标滑到上面时框全部露出,鼠标滑出框时框又只露出20px, 我们看到params中的样式属性都出现在了"原来的样子中-style属性中"。另外对于位置变化的动画效果,要先给元素定位,如本处的position:absolute。这个例子中另外一个需要注意的是stop()函数:停止所有在指定元素上正在运行的动画。http://www.w3school.com.cn/jquery/effect_stop.asp
$("#3").mouseover(function(){$(this).stop().animate({height:"toggle","width:"toggle"})})
如上样式属性值设成toggle的话表示在有和无之间进行切换
②jQuery动画队列
把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这样队列中的动画会按先后顺序一个一个执行
如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象来表示
$("#id").animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})
以上俩动画会同时执行,总耗时1秒,而
$("#id").animate(parmas,{duration:1000}).animate(parmas,{duration:1000})
这俩动画会一个一个执行,总耗时2秒
以上所讲的所有动画函数均属于动画队列函数
http://hi.baidu.com/chougood/blog/item/350421338b4156f31a4cff11.html
它们可以被队列控制函数所控制http://www.w3school.com.cn/jquery/jquery_ref_queue.asp
当然队列控制函数不仅仅只能控制动画队列函数,也能控制其他普通函数
如队列控制函数queue()函数
http://shawphy.com/2009/04/how-to-use-queue-and-dequeue.html
http://mrthink.net/jqueryapi-queue-dequeue/
补:
delay(duration,[queueName]) http://shawphy.com/2010/11/jquery-delay.html
分享到:
相关推荐
jQuery表单动画切换效果
jquery的动画效果 环境VS2005,无数据库,下载即可运行。
其次,展现的动画效果依赖于CSS3动画,so,新老结合实现的动画效果 使用方法: 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (注意保持图片路径正确即可)
效果描述: 非常不错的一个基于jQuery的进度条展示动画效果 使用方法: 1、引入css样式 2、将index.html中的代码部分拷贝过去即可
jQuery表单动画切换效果很不错的代码还是可以的
.jQuery动画效果
是一款效果非常酷的jQuery和CSS3...该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史,需要的朋友可以参考下
一款酷酷的jQuery文字切换动画效果,适用于做一些网站口号广告词的广告文字动画切换特效。
jQuery带动画效果图片轮播切换焦点图代码
jQuery图片排列动画效果
超酷jQuery图标排列动画效果,下载看看就知道值不值5分
jQuery添加背景动画效果插件是一款内置了9种不同效果的背景层动画。
jQuery动画垂直折叠导航效果
效果描述: 实现的原理很简单:鼠标悬停在图片上后,左侧的图片向上移动半个图片的距离(两个效果的图片事先做到一个图片上) 鼠标移走后图片恢复到原来位置。 但是最近好多懒人疑问想找这样的效果一直找...
【Jquery经典特效26】jQuery动画背景滑动切换效果
jQuery红色动画下拉导航效果 jQuery红色动画下拉导航效果 jQuery红色动画下拉导航效果 jQuery红色动画下拉导航效果 jQuery红色动画下拉导航效果 jQuery红色动画下拉导航效果
jquery和CSS3带弹性动画效果的工具栏菜单 动态工具栏
jquery实例超炫animate动画效果 demo是原版,效果还是相当炫丽 后面自制了两个
jquery实现动画打字效果代码是一款好莱坞电影里面特别棒的一款文字动画特效。 jquery实现动画打字效果代码界面图一: 点击查看演示 jquery实现动画打字效果代码界面图二: jquery实现动画打字效果...
代码简介:jQuery分页动画效果是一款淡入淡出交叉切换的jQuery分页特效代码下载。