none
Jquery在show控件过程中offset问题 RRS feed

  • 问题

  • 请教各位:

    本人使用Jquery的show(1000)方法显示一个控件。之后需要获取该控件的位置。在show函数执行完成前获取到了一个位置值,但是该值是错误的,想请问给位大侠:这个错误的位置值是怎么产生的?html代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
    	主页
    </title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
        
    </head>
    <body>
    
        <div class="page">
            <div class="header">
                <div class="title">
                    <h1>
                        我的 ASP.NET 应用程序
                    </h1>
                </div>
                <div class="loginDisplay">
                    
                            [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">登录</a> ]
                        
                </div>
                <div class="clear hideSkiplink">
                    <a href="#NavigationMenu_SkipLink"><img alt="跳过导航链接" src="/OffsetSample/WebResource.axd?d=Po75Rj_sILZ4ZzN9oTSSjJajy6Po5lnI0N9Ua1107DCvEZVq4CbwqV9v_nZpre6cQR7G6f0zzcprqAfcDBvYoLtiChSjuTrDfu7FjhmMzLY1&amp;t=634558218503990931" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
    	<ul class="level1">
    		<li><a class="level1" href="Default.aspx">主页</a></li><li><a class="level1" href="About.aspx">关于</a></li>
    	</ul>
    </div><a id="NavigationMenu_SkipLink"></a>
                </div>
            </div>
            <div class="main">
                
        <div style="background-color: #008899;">
            <input type="button" value="隐藏->显示时,捕获按钮A位置" onclick="d();" style="margin: 0;" /><input type="button" value="动画完成后捕获按钮A位置" onclick="e();" style="margin: 0;" /></div>
        <div id="result" style="background-color: #00CC99; margin: 0;">
            目标钮位<input type="button" id="target" value="按钮A" style="margin: 0;" /></div>
        <div id="txtResult" style="background-color: #6699FF; margin: 0;">
        </div>
        <script type="text/javascript">
            function d() {
                $("#result").hide().show(1000); showResult();
            }
            function e() {
                $("#result").hide().show(1000, zp);
            }
            function zp() {
                var p = $("#target").offset().top;
                alert("按钮A真正top:" + p);
            }
            function showResult() {
                var text = $("#txtResult").html();
                var p = $("#target").offset();
                $("#txtResult").html(text + "<div>按钮A位置为 top:" + p.top.toString() + ",left:" + p.left.toString() + "</div>");
            }
        </script>
    
            </div>
            <div class="clear">
            </div>
        </div>
    
    </body>
    </html>
    
    



    使用“隐藏->显示时,捕获按钮A位置”按钮,获取到target按钮的top值为:288px,而用“动画完成后捕获按钮A位置”按钮获取到target按钮的top值为212px,请问各位:那个top=288是怎么来的?谢谢!

    2011年12月28日 8:00