How would I animate a zoom effect on a js vertical timeline

How would I animate a zoom effect on a js vertical timeline

I'm creating a vertical timeline with java script, and I'm trying to make
it look like things are zooming in when you hit a '+' button and zoom out
when you hit a '-' button. The problem is if I do just a:
$('.date').css('top', function(i, v){
var top_value = parseFloat(v)
$(this).animate({top: top_value+100*i+'px'}, 700);
}
everything sifts down, which makes sense... so I then got a bit more
technical and wrote a function that gets the index of the element closest
to the center of the screen and I wrote this:
(The date element is a heading such as 2012, 2011, 2010.. etc. each of the
headings are spaced out about 200px and to create the illusion of zoom in
or out I've tried to space each date heading out while still keeping a
center element in the center of the screen with no luck.)
here is a ascii representation of how the headings in the timeline look:
|2012|
|
|
|2011|
|
|
|2010|
if(i < closest_to_midle_index ){
$(this).animate({top: parseFloat(v)+10+i+'px'}, 600)
count++;
} else if(i > closest_to_midle_index ) {
$(this).animate({top: parseFloat(v)-10+i+'px'}, 600)
count++
}
but that works only for the two elements closest to the center element,
everything else stays the same... so then I was attempting to write a
scroll method that scrolls with the center element, but I could not figure
out how to get that to work. all of this to say How can I create the
illusion of a timeline zooming in or out? what I want is all the elements
to get closer to each other while still keeping the center element in
view... other wise it just looks like the whole timeline is shifting down.
any help would be greatly appreciated.