这个效果谁能模拟?下拉动画效果

试了一下.没能做出来.有谁知道是什么原理,或者能给个思路也行.谢谢了.
http://www.tudou.com/community/
地址是土豆网的.就在土豆的logo下方,依次是---------首页视频豆单专区豆丸黑豆社区.
鼠标停留在社区上方,会有个下拉列表出来.出来的时候弹了两下.就象个小球落地的动作.
还有右上角---注册登录我的 .鼠标停留我的也会出现同样效果.
希望知道怎么做的不吝赐教.呵呵.thanks

解决方案 »

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

onmouseover的时候：
jquery --> slider toggle网上例子很多，今天没时间给你写例子，自己搜搜吧。
给你个例子吧，我搜的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://docs.jquery.com" />
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
window.onload = (function(){try{

    $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });

  }catch(e){}});</script>
<style>

  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }

</style>
<style>html,body{border:0; margin:0; padding:0;}</style></head>
<body>
Click here...
  <div></div>
</body>
</html>
给你简单写个弹出的那个效果.<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#navi { width:102px;height:22px;background-color:#FFCC66;font-size:12px;line-height:22px;text-align:center;position:absolute;left:100px;top:150px; }
#context { width:100px;height:1px;border:1px solid #FFCC66;display:none;position:absolute;background-color:#FFF;font-size:12px;text-align:center; }
</style>
</head>
<body>
<div id='navi'>社区</div>
<div id="context">内容</div>
<script>
/* 简易弹出菜单 */
var boundMenu = {};
boundMenu.Bounce = {
easeOut: 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;
}
}
};
boundMenu.getId = function(id) { return document.getElementById(id); };
boundMenu.getPos = function(o) {
for(var _pos={x:0, y:0};o;o=o.offsetParent) {
_pos.x += o.offsetLeft;
_pos.y += o.offsetTop;
}
return _pos;
}
boundMenu.init = function(id, tipID) {
var _boundObj = this;
this.o = this.getId(id);
this.context = this.getId(tipID);
this.left = this.getPos(this.o)['x'];
this.top = this.getPos(this.o)['y'];
this.o.onmouseover = function() { _boundObj.show(); };
};
boundMenu.show = function() {
this.context.style.cssText = 'left:' + this.left + 'px;top:' + (this.top + this.o.offsetHeight) + 'px;display:block;';
this.b = 1, this.c = 100, this.d = 100, this.t = 0;
this.run();

};
boundMenu.run = function() {
var _this = this;
this.context.style.height = Math.ceil(boundMenu.Bounce.easeOut(this.t, this.b, this.c, this.d)) + 'px';
if(this.t < this.d) { this.t++; setTimeout(function() { _this.run(); }, 10)}
};
boundMenu.init('navi','context');
</script>
</body>
</html>
谢谢哦.
jquery 不熟,我自己再看看.用普通js是怎么样写哦.
JQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
    $("#menu").mouseover(function(){
        $("#content")
            .slideDown(500)
            .animate({height:"50px"},500)
            .animate({height:"60px"},500);
    });
    $("#menu").mouseout(function(){
        $("#content").css({display:"none"});
    });
};
</script>
<style>
    #menu{width:50px;border:1px solid #EEE;}
    #content{width:50px;height:60px;display:none;background:#AAA;}
</style>
<div id='menu'>menu</div>
<div id="content">
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</div>
("#menu").mouseover(function(){
        $("#content")
            .slideDown(500)
            .animate({height:"50px"},50)
            .animate({height:"60px"},50);
    });