jQuery animate on scroll to a certain point

Question

I'm trying to reduce an elements top padding smoothly on scroll. At the same time i want the 2 child elements to fade, 1 of them out and 1 in. Ive got the fading right but i cant get the padding top to work correctly. Can anybody see what may be wrong with my function?

$(window).scroll(function () { 
    $('.transitionParent').css({
        'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
    });
    $('.ipadOutline').css({
        'opacity' : 1-($(this).scrollTop()/500)
    });
    $('.ipadPhoto').css({
        'opacity' : 0+($(this).scrollTop()/500)
    });
});

http://jsfiddle.net/pXdhB/1/

---

I've also tried (with no luck!)

var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));

Answer 1

Something like this?

DEMO http://jsfiddle.net/pXdhB/7/

JQUERY

$(window).scroll(function () {
    $('.transitionParent').stop().animate({
        'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
    }, 1000, function () {
        // Animation complete.
    });
    $('.ipadOutline').css({
        'opacity': 1 - ($(this).scrollTop() / 500)
    });
    $('.ipadPhoto').css({
        'opacity': 0 + ($(this).scrollTop() / 500)
    });
});

Answer 2

Like this?

   $(window).scroll(function () { 
            $('.transitionParent').css({
                'padding-top' : 100 - ($(this).scrollTop()-($(this).scrollTop())/500)
            });
            $('.ipadOutline').css({
                'opacity' : 1-($(this).scrollTop()/500)
            });
            $('.ipadPhoto').css({
                'opacity' : 0+($(this).scrollTop()/500)
            });
        });

http://jsfiddle.net/DkM8a/