jquery如何设计一个div出现动画，掉下来弹动两下之后停止
用jquery设计一个动画，一个div首先是display:none;点击一个button之后，div从上面掉下来，到指定位置之后(随意设置一个)弹几下，之后停下（和ppt的一种出现方式是一样的，弹几下稳定下来）。求具体代码演示啊！
[解决办法]
可以看一下jquery的animate制作动画效果的使用方法。
[解决办法]
<div id='kk' style='border:solid 1px red;width:20px;height:20px;position:absolute;left:100px;top:100px'></div>
<div id='dpx' style="border: solid 1px;height: 1px;position: absolute;top: 370px;width: 100%"></div>
<script>
(function(div){
var nowspeed = 0; //当前速度
var niudun = 4.8; //(牛顿)加速度
var dpx= 350; //假定地平线坐标
var tx = .75; //弹性系数
var top = parseInt(div.style.top);
function run(){
var me = arguments.callee;
nowspeed+=niudun;
top+=nowspeed;
if(top>dpx){
//var d =
top = dpx - (top-dpx)*.7;
nowspeed *= -1*tx;
if(Math.abs(nowspeed)<1){
div.style.top = dpx+'px';
return;
}
}
div.style.top = top+'px';
setTimeout(run, 1000/10);
}
run();
})(document.getElementById('kk'));
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script>
function easeOut(t,b,c,d){
if ((t/=d) < (1/2.75)) {return c*(7.5625*t*t) + b;}
else if (t < (2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;}
else if (t < (2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;}
else {return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}
}
function test(){
var stopPos=500;//指定停止位置
var d_test=document.getElementById("d_test");
d_test.style.display="block";
var chgTop=stopPos-d_test.offsetHeight;
var t=0;b=d_test.offsetTop,c=chgTop,d=100;
var interval=setInterval(
function(){
t++;
var top=Math.ceil(easeOut(t,b,c,d));
if(t>=d
[解决办法]
top>=chgTop) {
clearInterval(interval);
d_test.style.top=chgTop+"px";
}else d_test.style.top=top+"px";
},10
);
}
</script>
</head>
<body>
<div id="d_test" style="width:50px;height:50px;border:solid 1px red;position: absolute;top:0;left:100px;display:none;"></div>
<input type="button" value="test" onclick="test()"/>
<div style="border-top:solid 1px green;position: absolute;top:500px;width:100%;"></div>
</body>
</html>
<body>
<div>
<input type="button" id="drop" value="落下" style="margin: 0 auto;display:block;"/>
<input type="button" id="back" value="复位" style="margin: 0 auto;display:block;"/>
</div>
<div id="container" style="position:relative;width:600px;height:800px;border:#555 2px solid;margin:0 auto;">
<div class="" id="box" style="position:absolute;left:275px;top:0;width:50px;height:50px;background:#333"></div>
</div>
<script type="text/javascript" >
//缓动函数需要的dom元素和bounce算法
var drop=document.getElementById('drop'),
box=document.getElementById('box'),
container=document.getElementById('container'),
timeId,
Bounce = function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
};
//运动函数中bounce算法的参数的值
var opts={
timer:0,
begin: 0,
change:container.clientHeight-box.clientHeight,
duration:150,
interval:10
};
//运动函数
var dropDown=function(){
if(opts.timer<=opts.duration){
var top=Bounce(opts.timer,opts.begin,opts.change,opts.duration)+'px';
box.style.top=top;
opts.timer++;
timeId=setTimeout(dropDown,opts.interval)
}else{
opts.timer=0;
}
}
//两个按钮的事件绑定
drop.onclick=function(){
if(timeId) return false;
dropDown();
};
back.onclick=function(){
box.style.top='0px';
timeId=null;
}
</script>
</body>
