爲什麼我不能讓我的jQuery leftScroll動畫起作用？

Question

所以我試圖動畫一個簡單的水平滾動使用jQuery，但它不會觸發，爲什麼？

http://jsfiddle.net/langoon/b5ZTH/

HTML

<a href="#1">1</a> 
<a href="#2">2</a> 
<a href="#3">3</a> 

<section> 
    <a name="1">1</a> 
    <a name="2">2</a> 
    <a name="3">3</a> 
<section> 

CSS

section { 
    width: 100%; 
    overflow: auto; 
    white-space: nowrap; 
    } 
a[name] { 
    width: 100%; 
    display: inline-block; 
    white-space: normal; 
    } 
a[name='1'] { 
    background-color: green; 
    } 
a[name='2'] { 
    background-color: yellow; 
    } 
a[name='3'] { 
    background-color: red; 
    } 

jQuery的

$('a[href]').click(function(){ 

    $('section').stop().animate({ 
     scrollLeft: $(this.hash).offset().left 
    }, 1000); 

});​ 

Answer 1

我解決它改變了jQuery代碼：

$('a[href]').click(function(){ 

    var basePos = $("a[name]").offset().left/-1; // Get position of first a[name] 
    var scrollPos = $("a[name='" + this.hash.replace('#','') + "']").offset().left; 

    $('section').stop().animate({ 
     scrollLeft: basePos + scrollPos 
    }, 'fast'); 

});​ 

Answer 2

這可能工作：

var w = []; 
var wt = 0; 

$('section a').each(function(i,v){ 
    (i == 0) ? wt = 0 : wt += $(this).width(); 
    w.push(wt); 
}); 


$('a[href]').click(function(){ 
    var n = this.hash.replace('#',''); 
    var el = $.find("a[name='"+n+"']"); 
    console.log(w[n-1]); 
    $('section').animate({ 
     scrollLeft: w[n-1] 
    }, 1000); 

});