关于jQuery $("").animate()效果的定位出现。

问一下儿，写了一个弹出层的效果，但是有个小问题。
这个层每次出来的时候都是从左上角 top:0  left:0 的位置‘滑动’出来的，要怎么写才能让这个层，从被触发的位置滑动出来？
比如我定义了一个页面中的任意一个位置，然后点击这个位置的时候，就从这个位置‘滑动’出来。
－－－－－－
<script type="text/javascript" src="../Common/Js/jquery-1.3.2.js"></script>
<script type="text/javascript">
    function popupDiv(div_id) 
    {
        var div_obj = $("#"+div_id);
        //窗口宽高
    var windowWidth = document.body.clientWidth;
        var windowHeight = document.body.clientHeight;        //弹出层宽高
    var popupHeight = div_obj.height();
        var popupWidth = div_obj.width();        //目标位置
    var btn= $("#btnTest");
        var Coordinate= $("#btnTest").offset();
        
        //显示层，可以自定义层
        div_obj.css({"position": "absolute"})
               .animate(
               {
               left: Coordinate.left + btn.width() + 3,
               top: Coordinate.top + btn.height() + 3, 
               opacity: "show"
               }, "slow");
    }
    
    function hideDiv(div_id) {
        $("#mask").remove();
        $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
    }
    </script>
－－－－－－
<body>
    <form id="form1" runat="server">
        <div id='pop-div' style="width: 300px;" class="pop-box">
            <h4>
                标题位置</h4>
            <div class="pop-box-body">
                <p>
                    正文内容
                </p>
                <input id="btnClose" type="button" onclick="hideDiv('pop-div');" value="关闭" />
            </div>
        </div>
        <input type="button" id="btnTest" value='test' onclick="popupDiv('pop-div');" />
        <select id="slt">
            <option value="1">1</option>
        </select>
    </form>
</body>

解决方案 »

  1.   


    <script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"> </script> 
    <script type="text/javascript"> 
    var x=y=0;
        function popupDiv(div_id,evt) 
        { 
         y = evt.clientY;
         x = evt.clientX
            var div_obj = $("#"+div_id);
            div_obj.css("top",y).css("left",x); 
            //窗口宽高 
        var windowWidth = document.body.clientWidth; 
        var windowHeight = document.body.clientHeight;         //弹出层宽高 
        var popupHeight = div_obj.height(); 
        var popupWidth = div_obj.width();         //目标位置 
        var btn= $("#btnTest"); 
        var Coordinate= $("#btnTest").offset(); 
            //显示层，可以自定义层 
            div_obj.css({"position": "absolute"}) 
                  .animate( 
                  { 
                  left: Coordinate.left + btn.width() + 3, 
                  top: Coordinate.top + btn.height() + 3, 
                  opacity: "show" 
                  }, "slow"); 
        } 
        
        function hideDiv(div_id) { 
            $("#mask").remove(); 
            $("#" + div_id).animate({left: x, top: y, opacity: "hide" }, "slow"); 
        } 
        </script> 
    <body> 
        <form id="form1" runat="server"> 
            <div id='pop-div' style="width: 300px;" class="pop-box"> 
                <h4> 
                    标题位置 </h4> 
                <div class="pop-box-body"> 
                    <p> 
                        正文内容 
                    </p> 
                    <input id="btnClose" type="button" onclick="hideDiv('pop-div');" value="关闭" /> 
                </div> 
            </div> 
            <input type="button" id="btnTest" value='test' onclick="popupDiv('pop-div',event);" /> 
            <select id="slt"> 
                <option value="1">1 </option> 
            </select> 
        </form> 
    </body>