jquery如何设计一个div出现动画，掉下来弹动两下之后停止

用jquery设计一个动画，一个div首先是display:none;点击一个button之后，div从上面掉下来，到指定位置之后(随意设置一个)弹几下，之后停下（和ppt的一种出现方式是一样的，弹几下稳定下来）。求具体代码演示啊！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

可以看一下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>
jquery需要动画插件才行，给你个原生js版的。<!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>
谢谢！差不多这个效果，我想问下javascript我还不太懂，我现在直接学jQuery是否合适呢？
感谢！差不多这个效果，我想问下javascript我还不太懂，我现在直接学jQuery是否合适呢？
原生js：<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>
一般缓动动画的主要部分就在于缓动算法，楼主可以自行google一下Tween算法，它集合了各种缓动效果。
感谢啊！虽然代码还不是很看得懂，但是功能实现了。分析你们的代码总比自己原创快好多啊。。我想请教下：我现在在实习，公司用的是jquery，我javascript都还不怎么上手，现在是直接学习jquery吗？
首先个人觉得没有“学习jquery”之说，jquery也只是用js写的一些封装好的方法。
建议循序渐进的来，最起码要把javascript几个重要的点（dom,面向对象，闭包，作用域和this）搞清楚，之后再“使用”jquery应该是水到渠成的事。其实jquery用得多了到最后还是要落到继续学习js上来。
jquery是一个javascript框架，建议楼主先学习javascript，弄清楚一些基本的javascript知识后，然后看jquery，jquery会简化javascript的代码书写，用起来更加方便，同样的效果，用jquery比javascript代码少一些，也利于后期维护。
首先个人觉得没有“学习jquery”之说，jquery也只是用js写的一些封装好的方法。
建议循序渐进的来，最起码要把javascript几个重要的点（dom,面向对象，闭包，作用域和this）搞清楚，之后再“使用”jquery应该是水到渠成的事。其实jquery用得多了到最后还是要落到继续学习js上来。谢谢！