Question

<style type="text/css">
    #box { background: red; width: 100px; height: 100px; color: #fff; line-height: 100px; }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $('a#clickMe').click(function(e) {
            e.preventDefault();
            $('#box').css('position', 'absolute').animate({
                'left' : '+=100px'
            }, function() {

                    if ($('#box').offset().left > $(document).width()) {
                        alert('that is far enough')
                    }

            });

        });
    });
</script>

<a href="" id="clickMe">Click Me</a>

<div id="box">I Move!</div>

当框到达页面末尾时，我正试图提醒“足够远”。但警报从未显示过。

修改

没关系，想通了。我不得不使用$（window）.width（）而不是$（document）.width（）;

Answer 1

因为向左移动元素会扩展文档的宽度。

尝试添加此css：

#wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    margin:0;
    padding:0;
}
#box{ 
    background:orange;
    top:0;left:0;
}

<div id="wrapper">
    <a href="" id="clickMe">Click Me</a>

    <div id="box">I Move!</div>
</div>

示例： http://jsfiddle.net/UhgM5/1/

编辑：已更新，使其与FF兼容。感谢@Tomalak Geret'kal。

Answer 2

你有两个问题：

offset（）。left（可能）不是你想要的，而是offset（）。left + width元素。
如果元素从文档的右边缘移开，文档的宽度将会增加，因此您永远不会离开边缘。

看看this example。这是解决此问题的一种方法。另一种是在div元素“拉伸”文档元素之前将文档width属性保存在某处并保持与原始宽度的比较。

为什么这个超级简单的jQuery不起作用？

修改

2 个答案: