將點擊li的邊緣推到水平列表的中心

Question

我想通過給第一個邊距補償一個點擊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/