找一个jquery弹出效果

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

我的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.data demo</title>
<style>
    .popdiv{width:400px;height:30px;margin:200px auto;}
    .popdiv a{width:30px;height:30px;background-color:red;display:inline-block;margin:0 10px;border-radius:3px;position:relative;text-indent:-22222222px;}
    .popdiv div{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>
  <div class="popdiv">
    <a href="#">
        点击1
        <div>弹出1</div>  
    </a>
    <a href="#">
        点击2
      <div>弹出2</div>
    </a>
  </div>
  <script type="text/javascript">
       $(function(){
               var popdiv = $(".popdiv");
               var _click = popdiv.find('a');
               _click.on('click',function(){
                    var _div = $(this).find('div');
                    $('.popdiv').find('div').css({'opacity':'0','top':'0'})
                    _div.animate({
                          'opacity':1,
                          'top':'-160px'
                    })
               })
       })    
  </script>
</body>
</html>
阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题