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

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>

------解决方案--------------------
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>

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

相关推荐