jQuery动画特效实例教程

本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下：

1.自制折叠内容块

内容块如下：

差异类="模块“div类="标题“跨度标题/span img src=' http :向上滚动。gif ' alt=' roll up ' title='汇总此模块/div div class='body '近日， 《体坛周报》 记者马德兴在接受天津体育频道《体坛新视野》 节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在/div/div给img元素绑定点击事件。

$(function() { $('div.caption img ')).单击(函数(){ //先找到img的父级元素，再找该父级元素的子元素var $body=$(this).最近的(“div.module”).find(' div。正文’)；if($ body。是(' :隐藏'){ $ body。show()；} else { $ body。hide()；} });});运行效果如下图所示：

切换元素的显示状态，还可以用触发器方法。

$(function() { $('div.caption img ')).单击(function () { $(this)).最近的(“div.module”).查找(' div.body ').toggle()；});});以上是没有动画效果的，有时候感觉会很唐突。实际上，显示，隐藏，切换方法都可以有动画效果。比如：

$(function() { $('div.caption img ')).单击(function () { $(this)).最近的(“div.module”).查找(' div.body ').切换("慢");});});又比如：

$(function() { $('div.caption img ')).单击(function () { $(this)).最近的(“div.module”).查找(' div.body ').切换(“慢”，函数(){ $(this)).最近的(“div.module”).toggleClass('rolledup '，$(this).is(' : hidden ')})；});});2.使元素淡入淡出

fadeIn(速度，回调)fadeOut(速度，回调)fadeTo(速度，不透明度，回调)3。上下滑动元素

向下滑动(速度，回调)向上滑动(速度，回调)滑动切换(速度，回调)4。停止动画

停止(clearQueue，gotoEnd)5 .创建自定义动画

动画（属性、持续时间、放松、回调)$('。类名')。动画({ opacity: '切换' },'慢速)如果写一个扩展函数。

$ .fn。渐变切换=功能(速度){返回这个。动画({ opa city 3360 ' toggle ' }，' slow ')；}6.自定义缩放动画

$('.类名')。每个（函数(){ $(此)).制作动画({ width: $(this)).宽度()* 2,高度： $(这个)。高度()* 2 });});7.自定义掉落动画

$('.类名)。每个（函数(){ $(此)).css(“”位置','相对')。动画({ opacity: 0，top: $(window)).高度()- $(这个)。高度()- $(这个)。位置()。top }，' slow '，function(){ $(this).hide()；})});8.自定义消散动画

$('.类名)。每个(函数(){ var position=$(this)).position()；$(这个)。css({ position: 'absolute '，top: position.top，left:position.left }).动画({ opacity: ' hide '，width: $(this).宽度()*5,高度： $(这个)。高度()*5 top: position.top - ($(this).高度()* 5/2)，left: position.left - ($(this).width() * 5 /2) }，' normal ')；});9.队列中的动画

//动画插入队列$('img ').队列(“chain”，function(){ })；$('img ').队列(“chain”，function(){ })；$('img ').队列(“chain”，function(){ })；$('img ').队列(“chain”，function(){ })；$("按钮")。单击(function(){ $('img ')).出列("链");//删除队列中的动画})cleaeQueue(名称)//删除所有未执行的队列中的动画延迟（持续时间、名称)//为队列中所有未执行的动画添加延迟相信本文所述对大家的jQuery程序设计有一定的借鉴价值。