jQuery/CSS3实现的人物跳动动画

本文作者html5tricks，转载请注明出处

之前我们分享过不少基于HTML5和CSS3的人物动画，比如这款CSS3人物摇头动画，以及这款CSS3人物行走动画，效果都非常赞。今天要给大家介绍的也是一款基于jQuery和CSS3的人物动画，它模拟了人物的跳动效果，一个小姑娘抱着一只宠物，在路上不停的跳动，非常开心。同时你也可以控制她跳动的速度，这些控制就是用jQuery实现的。

jquery-css3-jump-animation

接下来再看看实现的方法及源代码。

HTML代码：

<div class="charector-wrap " id="js_wrap">
	<div class="charector"></div>
</div>

JavaScript代码：

$(document).ready(function(){	
		$("a").on("click",function(e){
			$("#js_wrap").find(".charector-wrap").removeClass("paused");
			$("#js_wrap").attr("class","charector-wrap " + $(e.target).attr("class").split("-")[1])
		})
		$(".btn-paused").click(function(){
			$("#js_wrap").addClass("paused");
		})
	})

记得引用jQuery脚本库。

在线演示源码下载