jquery - 将单击的 li 的边距推到水平列表的中心

Question

我想通过给第一个 li 一个边距偏移量来将点击的 li 推到中心（或足够接近）。我的问题是我不完全确定如何进行算术运算。

我试过的是将 li 的总数除以 2，然后乘以 li 的宽度。我认为这会给我中心点。它没有相应地工作。

我难住了。

// set .active class when an li is clicked and push that li to the centre (or close enough.)
$('body').on("click", ".date li", function () {

  var self = $(this),
    li = $('.date li');

  li.removeClass('active');
  self.addClass('active');

  var num = self.index(),
    w = self.width(),
    t = w * (num / 2);

    t = t + 'px';

  // push the margin of the first li
  $('.date li:first-child').animate({ 'margin-left': t });

});

这是一个问题：http: //jsfiddle.net/vLQgy/1/

Answer 1

var num = self.index(),
liwidth = self.width(),
  total_width = $('.date').width(),

half = num / 2.0,
t = total_width / 2 - 84 * num - liwidth / 2;

t = t + 'px';

我开始t使用这段代码。

这是jsfiddle。http://jsfiddle.net/vLQgy/2/