滚动元素以水平查看

Question

I have a list of divs which are floated left. They are inside another div, which can be hovered over to move that inner block of divs left and right. These inner divs or 'events' have class names which include a year.

I also have a range slider at the bottom. The values of this slider are years. When the range slider is changed I would like the first div which includes that year number to slide into view.

See example here... http://thetally.efinancialnews.com/tallyassets/20years/index.html

Currently when you change the slider value the number changes accordingly, but I don't know how to slide everything so the related numbered div comes into view. They are in a row of floated left divs so can't be absolutely positioned.

In the example above the last event div has a class of 'year1998' so would be a good one to test the code on

 var slider = $('#range-slider'),
 textbox = $('#range-no');

 slider.change(function() {
 var newValue = parseInt($(this).val());

 textbox.empty();
 textbox.append(newValue);

( I need something here which would say...
 $('.year'+newValue).comeintoviewplease();
... or something to that effect)
 });

Thanks in advance for any help

Answer 1

检查一下，使用CSS过渡http://css3.bradshawenterprises.com/transitions/可以达到相同的效果