在线演示1 在线演示2 本地下载
$(‘somediv').addClass('animated shake').delay(1000).queue(function(next){ $(this).removeClass('animated shake'); next();});
注意以上代码中，我们使用delay方法来延迟1秒来让动画完成，然后再将添加的class删除，以便下次再次调用addClass生成动画效果在插件中找到相关代码，如下：
$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
注释后，换成我们需要执行的动画：
$(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){$(this).removeClass('animated ' + cssAnimation);next();});
另外， 我们使用cufon来将文字生成图片，主要需要在class变化的时候，重新调用cufon，如下：$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass).delay(500).queue(function(next){next();Cufon.refresh();});
这里我们添加一个选项cssAnimation，缺省值为“lightSpeedIn”，这样方便我们自己定义动画类型。settings = jQuery.extend({orientation: 'horizontal',// value: horizontal | vertical, default to horizontalcontainerDiv: '#timeline',// value: any HTML tag or #id, default to #timelinedatesDiv: '#dates',// value: any HTML tag or #id, default to #datesdatesSelectedClass: 'selected',// value: any class, default to selecteddatesSpeed: 'normal',// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normalissuesDiv: '#issues',// value: any HTML tag or #id, default to #issuesissuesSelectedClass: 'selected',// value: any class, default to selectedissuesSpeed: 'fast',// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fastissuesTransparency: 0.2,// value: integer between 0 and 1 (recommended), default to 0.2issuesTransparencySpeed: 500,// value: integer between 100 and 1000 (recommended), default to 500 (normal)prevButton: '#prev',// value: any HTML tag or #id, default to #prevnextButton: '#next',// value: any HTML tag or #id, default to #nextarrowKeys: 'false',// value: true | false, default to falsestartAt: 1,// value: integer, default to 1 (first)autoPlay: 'false',// value: true | false, default to falseautoPlayDirection: 'forward',// value: forward | backward, default to forwardautoPlayPause: 2000,// value: integer (1000 = 1 seg), default to 2000 (2segs)cssAnimation: 'lightSpeedIn'}, options); javascript调用如下：$(function(){Cufon.replace('#timeline a, #timeline h1').CSS.ready(function() {$().timelinr({autoPlay:'true', autoPlayPause:'3000', cssAnimation:'tada'});});});
以上代码可以看到，我们调用cufon将所有需要生成美化字体的元素都替换掉，然后调用timeliner插件，这里我们自定义动画类型为：tada，如果你需要生成其它效果，请自己修改类型。HTML代码HTML中我们定义了年份和每一个时间轴项目的内容，包括，文字和图片，这里代码很简单，只包含了一个框架，我们使用fixie.js来自动生成具体内容：