jQuery动画特效实例教程

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

成都创新互联公司主营滁州网站建设的网络公司,主营网站建设方案,成都app软件开发公司,滁州h5重庆小程序开发搭建,滁州网站营销推广欢迎滁州等地区企业咨询

1.自制折叠内容块

内容块如下：

div

class="module"

div

class="caption"

span标题/span

img

src="rollup.gif"

alt="rollup"

title="rolls

up

this

module"/

/div

div

class="body"

近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。

/div

/div

给img元素绑定点击事件。

$(function()

{

$('div.caption

img').click(function

()

{

//先找到img的父级元素，再找该父级元素的子元素

var

$body

=

$(this).closest('div.module').find('div.body');

if

($body.is(':hidden'))

{

$body.show();

}

else

{

$body.hide();

}

});

});

运行效果如下图所示：

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

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle();

});

});

以上是没有动画效果的，有时候感觉会很唐突。实际上，show,hide,toggle方法都可以有动画效果。比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow');

});

});

又比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow',

function()

{

$(this).closest('div.module').toggleClass('rolledup',

$(this).is(':hidden'))

});

});

});

2.使元素淡入淡出

fadeIn(speed,

callback)

fadeOut(speed,

callback)

fadeTo(speed,

opacity,

callback)

3.上下滑动元素

slideDown(speed,

callback)

slideUp(speed,

callback)

slideToggle(speed,

callback)

4.停止动画

stop(clearQueue,

gotoEnd)

5.创建自定义动画

animate(properties,

duration,

easing,

callback)

$('.classname').animate({opacity:'toggle'},'slow')

如果写一个扩展函数。

$.fn.fadeToggle

=

function(speed){

return

this.animate({opacity:'toggle'},'slow');

}

6.自定义缩放动画

$('.classname').each(function(){

$(this).animate({

width:

$(this).width()

*

2,

height:

$(this).height()

*

2

});

});

7.自定义掉落动画

$('.classname').each(function(){

$(this)

.css("position","relative")

.animate({

opacity:

0,

top:

$(window).height()

-

$(this).height()

-

$(this).position().top

},'slow',function(){

$(this).hide();

})

});

8.自定义消散动画

$('.classname').each(function(){

var

position

=

$(this).position();

$(this)

.css({

position:

'absolute',

top:

position.top,

left:position.left

})

.animate({

opacity:

'hide',

width:

$(this).width()*5,

height:

$(this).height()*5

top:

position.top

-

($(this).height()

*

5

/

2),

left:

position.left

-

($(this).width()

*

5

/2)

},'normal');

});

9.队列中的动画

//动画插入队列

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('button').click(function(){

$('img').dequeue('chain');

//删除队列中的动画

})

cleaeQueue(name)//删除所有未执行的队列中的动画

delay(duration,

name)//为队列中所有未执行的动画添加延迟

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

用jquery可以做什么好

使用jQuery可以很方便的实现页面元素的显示和隐藏，因此也比较容易设计出一个美观大方多层次的导航菜单。

Tab内容的切换

网站的内容越来越丰富，于是网站都希望在尽量少的空间内展示尽量多的内容，而又不能显得凌乱不堪，让用户无法寻找。解决的最好办法就是在页面上使用Tab。目前，Tab已经成为Web 2.0网站上的一个流行元素，并且也衍生除了很多优秀的用户使用效果。下面是几个使用jQuery来实现Tab效果的大型网站的实例。

人性化的提示信息

最好的提示信息往往是在用户最开始出错的地方进行提示的信息。如果用户都已经进行了大部分的操作，此时如果提示某项有错，需要用户重新做，试想一下，这种做法很容易把用户激怒，甚至会进而放弃对网站的访问和使用。

可定制的用户内容

Web 2.0网站一个很大的特征就是用户的参与。因此现在很多网站都可以让用户根据自己的需求进行定制，用户可以根据自己的喜好对网页的显示内容甚至显示风格进行选择或者定制。

动态的图片展示效果

Web 2.0网站的另一个显著的特点就是网页不再是千篇一律的静态页面。它出现了很多以前需要使用Flash等工具才能做出来的动态效果。例如，Dell网站上有一个图片切换效果，就是使用Flash来实现的，如图所示。

AJAX实时局部刷新

AJAX可以给用户带来很好的用户体验。用户感到的最直观一个体验就是页面的局部实时刷新。在传统网站上，想要更新页面内容的某一部分，则必须将这个页面重新刷新；使用AJAX之后，用户会看到，只有需要改变的内容才会重新发送数据给服务器，其他部分则保持不变。

jQuery中提供了很强大的AJAX功能。著名的微博客类网站twitter.com就是使用的jQuery中的AJAX技术来实现其信息的发布的。如图所示。

数据的可视化显示

在日常生活中，经常会接触到大量的数据统计信息，如工作报表、消费统计等。最简单的表现这些报表数据的方式就是直接列出一个表格。不过从某种程度上来说，单纯的一堆数字看起来不是那么的直观易读。因此，在Web 2.0时代，人们更愿意使用更加直观的可视化图表的方式对统计数据进行显示。

JQuery解析XML数据的几个简单实例

用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案：

script

type="text/javascript"

$(document).ready(function()

{

$.ajax({

url:

'',

dataType:

'xml',

success:

function(data){

//console.log(data);

$(data).find("channel").find("item").each(function(index,

ele)

{

var

titles

=

$(ele).find("title").text();

var

links

=

$(ele).find("link").text();

console.log(titles+'-----');

$("#noticecon").find('ol').append('lia

href="'+links+'"'+titles+'/a/li');

});

}

});

})

/script

div

id="noticecon"

ol

/ol

/div

第二种方案：

script

type="text/javascript"

$.get("",

function(data){

$(data).find('channel').find('item').each(function(index,

ele){

var

titles

=

$(ele).find('title').text();

var

links

=

$(ele).find('link').text();

$("#noticecon").find('ol').append('lia

href="'+links+'"'+titles+'/a/li');

})

});

/script

div

id="noticecon"

ol

/ol

/div

一般步骤如下：

1.

读取xml文件

$.get("xmlfile.xml",function(xml){

//xml即为可以读取使用的内容，具体读取见第2点

});

2.

读取xml内容

如果读取的xml是来于xml文件，这结合上面的那点，处理如下：

$.get("xmlfile.xml",function(xml){

$(xml).find("item").length;

});

如果读取的是xml字符串，则要注意一点，xml字符串的必然被"xml"和"/xml"包围才可以被解析

$("xmlrootitem/item/root/xml").find("item").length;

解析xml内容：

示例xml：

?xml

version="1.0"

encoding="utf-8"

?

fields

field

Name="Name1"

fieldnamedsname/fieldname

datatype字符/datatype

/field

field

Name="Name2"

fieldnamedstype/fieldname

datatype字符/datatype

/field

/fields

以下是解析示例代码：

$(xml).find("field").each(function()

{

var

field

=

$(this);

var

fName

=

field.attr("Name");//读取节点属性

var

dataType

=

field.find("datatype").text();//读取子节点的值

});

以上这篇JQuery解析XML数据的几个简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

分享题目：jquery项目实例,jquery 实例
网页地址：http://myzitong.com/article/hocjdj.html