jQuery动画特效实例教程

<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> 

$(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(); }  });});

$(function() {  $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').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')) });  });}); 

fadeIn(speed, callback)    fadeOut(speed, callback)fadeTo(speed, opacity, callback)

slideDown(speed, callback)slideUp(speed, callback)slideToggle(speed, callback)

stop(clearQueue, gotoEnd)

animate(properties, duration, easing, callback)$('.classname').animate({opacity:'toggle'},'slow')

$.fn.fadeToggle = function(speed){  return this.animate({opacity:'toggle'},'slow');}

$('.classname').each(function(){  $(this).animate({    width: $(this).width() * 2,    height: $(this).height() * 2  });});

$('.classname').each(function(){  $(this)    .css("position","relative")    .animate({      opacity: 0,      top: $(window).height() - $(this).height() - $(this).position().top    },'slow',function(){ $(this).hide(); })});

$('.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');});

//动画插入队列$('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)//为队列中所有未执行的动画添加延迟