javascript - 找一个jquery弹出效果-PHP中文网问答

网站示例
跟这种弹出效果一模一样用jquery怎么写，不依赖插件功能
我这animate但弹出来的效果是整体向上，不像他这种是从盒子里弹出来的感觉！！

我的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.data demo</title>
<style>
    .popp{width:400px;height:30px;margin:200px auto;}
    .popp a{width:30px;height:30px;background-color:red;display:inline-block;margin:0 10px;border-radius:3px;position:relative;text-indent:-22222222px;}
    .popp p{position:absolute;top:0;left:0;opacity:0;height:150px;width:150px;border:1px solid #eee;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
</style>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
  <p class="popp">
    <a href="#">
        点击1
        <p>弹出1</p>  
    </a>
    <a href="#">
        点击2
      <p>弹出2</p>
    </a>
  </p>
  <script type="text/javascript">
       $(function(){
               var popp = $(".popp");
               var _click = popp.find('a');
               _click.on('click',function(){
                    var _p = $(this).find('p');
                    $('.popp').find('p').css({'opacity':'0','top':'0'})
                    _p.animate({
                          'opacity':1,
                          'top':'-160px'
                    })
               })
       })    
  </script>
</body>
</html>