jquery - 为什么我不能让我的 jQuery 左滚动动画工作？

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

这可行:

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);

});