Why won't this super simple jQuery work?
<pre><code>&lt;style type="text/css"&gt;
    #box { background: red; width: 100px; height: 100px; color: #fff; line-height: 100px; }
&lt;/style&gt;
&lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(function() {

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

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

            });

        });
    });
&lt;/script&gt;

&lt;a href="" id="clickMe"&gt;Click Me&lt;/a&gt;

&lt;div id="box"&gt;I Move!&lt;/div&gt;
</code></pre>

<p>I'm trying to alert "that is far enough" when the box reaches the end of the page. But the alert never shows.</p>

<h2>EDIT</h2>

<p>Never mind, figured it out. I had to use $(window).width() instead of $(document).width();</p>
