jquery animate not working as expected
<p>the first time this red div is clicked on, it animates all the way from the top of the page; I would expect it to only go down 50 pixels (as is in fact <em>does</em> on subsequent clicks. What is going wrong here?</p>

<p>I've not really used <code>animate</code> before. Do I need to somehow specify a start point?</p>

<p>Thank you </p>

<pre><code>$(document).ready(function() {
    $('.obscure').on('click', function() {

        var blueDiv = $('.blue').clone();

        blueDiv.css({'display': 'none', 'z-index': '0', 'top' : y, 'position' : 'absolute'});

        $('#wrapper').append(blueDiv);
        var obscure = $('.obscure');
        var offset = obscure.offset();
        var y = offset.top;
        blueDiv.css('top', y);
        blueDiv.show();

        //$('.obscure').css('z-index', 10000);
        var off = parseInt(y) + 50;
        console.log(y);
        $('.obscure').animate({
            top : y + 50
        }, 100);


    });
});​
</code></pre>

<p><a href="http://jsfiddle.net/loren_hibbard/U7tAV/2/" rel="nofollow">http://jsfiddle.net/loren_hibbard/U7tAV/2/</a></p>
