JS仿淘宝图片弹跳效果

JS仿淘宝图片弹跳效果，开始我以为是CSS3写的，后来查看源码发现是JS弄的，但是他们的JS是加了密的，于是自己试着写了个，下面上源码！

但是有很多不理想的地方，希望大家共同交流进步，源文来自数据库之家，转载注明出处哈！

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
$(".box1").hover(
function () { setTimeout(showBox, 300); },
function () { $(this).find("div").css("top", "-125"); }
);
});
function showBox() {
demo($(".box1").find("div"));
}
var i = null;
function demo(obj) {
i >> clearInterval(i);
var t = 1;
var times = 5;
var top = obj.position().top;
i = setInterval(function () {
console.log("top:" + top + " t:" + t);
if (times == 0) {
clearInterval(i);
obj.css("top", 0);
}
top = obj.position().top + t;
if (top < 0) {
t += 1;
obj.css("top", top);
} else {
t = (t > 0) ? t * (-1) * 0.5 : 0;
obj.css("top", 0);
times--;
}
}, 20);
}
</script>
<style>
body {
margin: 125px 0;
padding: 0;
}
div {
}
.box1 {
height: 125px;
width: 125px;
background: #FAC26D;
position: relative;
overflow: hidden;
}
.box2 {
height: 125px;
width: 125px;
background: #7DDAE1;
position: absolute;
top: -125px;
text-align: center;
}
</style>
</head>
<body>
<div class='box1'>
<div class='box2'>
<span style="margin-top:20px;"><br></br>欢迎使用！</span>
</div>
</div>
</body>
</html>

查看效果：效果示例