jQuery animate to top of the viewport

Question

I'm creating a product page for an e-commerce website which has a fixed bar at the top of the page and the basket within that. There are lots of items on the page and hence there are lots of 'Add To Basket' buttons.

I need the Add To Basket button to fly up to the basket at the fixed bar. At the moment, I've managed to get the box to appear where I need it to appear when clicked, however there isn't any transition with the animation. I'm guessing it could be the fact that I'm turning the object into a position:fixed;.

Here's a fiddle of what I've got so far.. Hope you can help!

http://jsfiddle.net/d7tHU/

$('.addToCart').click(function(){
    $(this).css('position','fixed');
    $(this).animate({
        top: '0px',
        right:'0px'
    }, "slow");

});

Answer 1

A CSS solution that uses the transition attribute and has less reliance on JavaScript: http://jsfiddle.net/d7tHU/10/