Question

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 does on subsequent clicks. What is going wrong here?

I’ve not really used animate before. Do I need to somehow specify a start point?

Thank you

$(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);


    });
});​

http://jsfiddle.net/loren_hibbard/U7tAV/2/

Answer 1

Doesn’t seem to happen in Firefox, but does in Chrome.

Fix: http://jsfiddle.net/U7tAV/10/

I simply changed:

    $('.obscure').animate({
        top : y + 50
    }, 100);

to apply the top position before the animation .css('top', y):

    $('.obscure').css('top', y).animate({
        top : y + 50
    }, 100);